CSS img float:right 文本块逐步出现

如何解决CSS img float:right 文本块逐步出现

我试图装饰一个文本块（div，包含一个 h-tag 和各种 p-tags），我的代码是

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Filipinas 07</TITLE>
<Meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">
<Meta HTTP-EQUIV="content-language" CONTENT="en">

<!--Scriptsprache für Event-Handler festlegen: -->
<Meta HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<!--Stylesprache für das Dokument festlegen: -->
<Meta HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<Meta NAME="description" CONTENT="Filipinas">
<Meta NAME="author" CONTENT="Wolfgang Jakobi">
<Meta NAME="editor" CONTENT="html-editor phase 5">
<Meta NAME="lastPage">

<LINK REL="stylesheet" HREF="style/homepage.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="style/filipinas.css" TYPE="text/css">
<!-- Hack für den Internet Explorer ab 6,blendet den horizontalen Scrollbalken aus -->
<!--[if gte IE 6]>
<style type="text/css">
html {overflow-x:hidden;}
body {margin-right:28px;}
</style>
<![endif]-->
<SCRIPT TYPE="text/javascript" SRC="common/homepage.js"></SCRIPT>
<SCRIPT TYPE="text/javascript">
<!--
function Init() {
  /* checkFrameset();  Falls die Seite direkt aufgerufen wurde */
  fnBtnLft();
  fnBtnRgt();
  window.setTimeout("NumberFootNotes()",500);
}
//-->
</SCRIPT>
</HEAD>
<BODY ONLOAD="Init();" style="padding:0em 1em 0em 1em;">
<NOSCRIPT><H1 CLASS="NoScript"></H1></NOSCRIPT>
<H1 ID="_top" CLASS="Pageheading">Filipinas 07</H1>
<HR CLASS="Pageheading">
<!--               Seiteninhalt                                 -->
<H1 CLASS="filipinasheader" ID="_Speisekarte">Menu</H1>
<!-- margin:top right bottom left -->
<IMG WIDTH="311" HEIGHT="162" STYLE="float:right; margin:1.20em 0em 0em 0.5em 0" SRC="./filipinas/fruehstueck_baguett.jpg" ALT="fruehstueck_baguett.jpg"
</IMG>
<DIV STYLE="overflow:auto; widt:300px; margin: 0em 0em 0em 0em;">
<!-- blockweise umfließt der Text rechts des Bildes,das am linken Rand der Seite steht,der obere Rand des Bildes ist nach der Texthöhe von H2.filipinas                                                -->
 <H2 CLASS="filipinas" ID="_Fruehstueck">Breakfast</H2>
 <P CLASS="Std">UK: 2$</P>
 <P CLASS="Std">tea (pleas order the type) or coffee (please order one of these options)</P>
 <P CLASS="Std">Porridge</P>
 <P CLASS="Std">bacon</P>
 <P CLASS="Std">fried eggs (pleas order the quantity 1 egg is included in the price every egg more costs 1$)</P>
 <P CLASS="Std">toast</P>
 <P CLASS="Std">baguette (please order the quantity 1 baguette is included in the price every baguette more costs 1$)</P>
 <P CLASS="Std">butter</P>
 <P CLASS="Std">orange juice</P>
 <P CLASS="Std">Continental: 3$</P>
 <P CLASS="Std">Coffee or Expresso (please order one of these options)</P>
 <P CLASS="Std">cooked egg (please order the time)</P>
 <P CLASS="Std">blak or white bread (please order)</P>
 <P CLASS="Std">butter</P>
 <P CLASS="Std">german saucage</P>
 <P CLASS="Std">jam (strawBerry,currant,plum,please order)</P>
 <P CLASS="Std">choclad creame (please order optional to jam)</P>
 <P CLASS="Std">orange juice</P>
</DIV>


<hr CLASS="filipinasfull" STYLE="margin-top 0.0em;">

<!-- margin:top right bottom left -->
<IMG WIDTH="275" HEIGHT="183" STYLE="float:right; margin:1.20em 0em 0em 0.5em" SRC="./filipinas/fruehstueck_marmelade.jpg" ALT="fruehstueck_marmelade"
</IMG>
<DIV STYLE="overflow:auto; width:300px; margin: 0em 0em 0em 0em;">
  <H2 CLASS="filipinas" ID="_Mittagessen" STYLE="margin-top:0em;">Lunch</H2>
  <P CLASS="Std">Very german:
  </P>
  <P CLASS="Std">Soup of vegetables: 2
  </P>
  <P CLASS="Std">Soup of Potato: 3
  </P>
  <P CLASS="Std">Viennese Schnitzel 12:
  </P>
  <P CLASS="Std">Calf brest filled: 14
  </P>
  <P CLASS="Std">Pig Rolle with garlic grilled: 12
  </P>
</DIV>


<!--               Ende Seiteninhalt                            -->

<DIV STYLE="margin-top: 0.5em; clear:both;">
  <A CLASS="BtnLft" ID="BtnLft"></A>
  <A CLASS="BtnRgt" ID="BtnRgt"></A>
</DIV>
<DIV STYLE="margin-top: 3em; clear: both;">
  <IMG SRC="common/mwcts.jpg" ALT="Made with Cascading Style Sheets"
   STYLE="float: left; width: 88px; height: 31px; margin: 0em 0em 0em 0em;">
  <H6 CLASS="PageFootCSS">
  <SCRIPT TYPE="text/javascript">myURL();</SCRIPT>
  </H6>
  <H6 CLASS="PageFootCSS">
  <SCRIPT TYPE="text/javascript">lstModified();</SCRIPT>
  </H6>
</DIV>
</BODY>
</HTML>

但是结果很奇怪，看起来像这样

为什么要执行这些步骤？我使用火狐浏览器。不要介意与我的问题无关的 JavaScript，我需要控制的 Meta lastPage 如果最后一页有下一个网页的按钮，如果一个主题包含我用来保存 HTML 下的各种网站同名，在本例中为“filipinas”，并将文件从 00 编号到所需的最高数字，我很容易通过数字 00 识别第一个 HTML，但对于最后一个文件，我需要一个指标，即 Meta 标签。并且 css-Sheets 在其他 HTML 文件中使用没有任何问题。毫无疑问，这是发布的代码。