如何让列表显示在浮动图片与段落的下方？

嘿，这个问题我太熟悉啦！你遇到的是浮动元素脱离文档流引发的布局问题——图片设置了float:left、文本设置了float:right，它们会跳出正常的文档流，所以后面的有序列表就会钻到它们的空隙里，第一个元素就跑到图片顶部去了。下面给你两种简单有效的解决办法：

方法一：给列表添加清除浮动样式 #

直接给<ol>标签加上clear: both的样式，让它清除左右两边的浮动，这样就能乖乖跑到图片和文本的下方了。

修改后的代码：

<div id="Teil"style="display: inline-block"> 
  <img src="Bilder/Bild4.jpg" width=600em style="float:left; margin:1em"> 
  <p style="float:right; margin:1em; font-family:'Corbel'; font-size:1.7em;"> 
    <b>Was ihr braucht:</b><br> 
    250 g weiche Butter<br> 
    100 g Zucker<br> 
    100 g brauner Zucker<br> 
    1 TL Backpulver<br> 
    300 g Mehl<br> 
    2 Stk Eier<br> 
    100 g gemahlene Haselnüsse<br> 
    100 g gehackte Walnüsse<br> 
    150 g Chocolate Chips<br>
  </p> 
  <ol style="clear: both;"> 
    <li>Vor Beginn des Backens muss der Ofen auf 200 Grad vorgeheizt werden.</li> 
    <li>Anschließend wird eine Schüssel zur Hand genommen (z.B. Plastikschüssel). Darin soll die weiche Butter (kann in der Mikrowelle etwas geschmolzen werden) und die zwei Zucker Arten verrührt werden.</li> 
    <li>Die Eier jetzt einzeln auf höchster Stufe des Handrührgeräts unterrühren.</li> 
    <li>Jetzt kommen die Haselnüsse und Walnüsse ins Spiel. Diese müssen jetzt zur Masse hinzugefügt und vorsichtig untergemengt werden. Anschließend können auch die Schokotropfen untergerührt werden.</li> 
    <li>Ist die Masse gut verrührt, können aus dem Teig kleine Kugeln geformt werden. Die Größe erinnert an einen Tischtennisball. Die geformten Kugeln sollen jetzt mit einer Gabel flach gedrückt und auf das Backblech verteilt werden.</li> 
    <li>Jetzt können die Chocolate Chip Cookies auf mittlerer Schiene bei 170 Grad gebacken werden.</li> 
    <li>Anschließend auskühlen lassen und verzehren.</li> 
  </ol> 
</div>

方法二：给外层容器添加Clearfix（更健壮的方案） #

如果以后容器里的浮动元素更多，用Clearfix伪元素的方法更靠谱，它能让外层容器正确包裹所有浮动元素，避免后续布局都受影响。

修改后的代码：

<style>
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>

<div id="Teil" class="clearfix" style="display: inline-block"> 
  <img src="Bilder/Bild4.jpg" width=600em style="float:left; margin:1em"> 
  <p style="float:right; margin:1em; font-family:'Corbel'; font-size:1.7em;"> 
    <b>Was ihr braucht:</b><br> 
    250 g weiche Butter<br> 
    100 g Zucker<br> 
    100 g brauner Zucker<br> 
    1 TL Backpulver<br> 
    300 g Mehl<br> 
    2 Stk Eier<br> 
    100 g gemahlene Haselnüsse<br> 
    100 g gehackte Walnüsse<br> 
    150 g Chocolate Chips<br>
  </p> 
  <ol> 
    <li>Vor Beginn des Backens muss der Ofen auf 200 Grad vorgeheizt werden.</li> 
    <li>Anschließend wird eine Schüssel zur Hand genommen (z.B. Plastikschüssel). Darin soll die weiche Butter (kann in der Mikrowelle etwas geschmolzen werden) und die zwei Zucker Arten verrührt werden.</li> 
    <li>Die Eier jetzt einzeln auf höchster Stufe des Handrührgeräts unterrühren.</li> 
    <li>Jetzt kommen die Haselnüsse und Walnüsse ins Spiel. Diese müssen jetzt zur Masse hinzugefügt und vorsichtig untergemengt werden. Anschließend können auch die Schokotropfen untergerührt werden.</li> 
    <li>Ist die Masse gut verrührt, können aus dem Teig kleine Kugeln geformt werden. Die Größe erinnert an einen Tischtennisball. Die geformten Kugeln sollen jetzt mit einer Gabel flach gedrückt und auf das Backblech verteilt werden.</li> 
    <li>Jetzt können die Chocolate Chip Cookies auf mittlerer Schiene bei 170 Grad gebacken werden.</li> 
    <li>Anschließend auskühlen lassen und verzehren.</li> 
  </ol> 
</div>

简单说下原理：

• clear: both会让元素强制移动到左右两边所有浮动元素的下方，直接解决列表错位的问题；
• Clearfix的伪元素则是在容器的末尾生成一个看不见的块级元素，它会清除浮动，让容器能正确计算自身的高度，这样后面的所有内容都会跟着容器的底部走，不会再钻到浮动元素的空隙里。

内容的提问来源于stack exchange，提问作者supermaxy4