css - 奇怪的 float 清除问题

Question

我有一个非常基本的布局，一个 float div 用于左侧菜单容器列，一个全宽非 float div，内容区域有左边距。

当我将 float 的 div 放入内容区域时，它们会 float 并按预期放置，直到我清除 float 。

下一行 float 不会出现在上一行的正下方，而是一直低于菜单栏的底部

正如您在下面看到的，布局没有什么特别之处，但 float 问题让我抓狂:)

<div style="float: left; width: 200px; height: 200px; border: 1px solid red;">
    floated left div
</div>
<div style="margin-left: 210px; border: 1px solid blue;">
    non floated right div containing floated divs inside<br />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
</div>

我制作了一个 jsfiddle 来演示这个问题； http://jsfiddle.net/jP6e9/

Answer 1

这是您需要使用 overflow:auto 来获得您想要的内容的古怪情况之一。

<div style="margin-left: 210px; border: 1px solid blue;overflow:auto;">

jsFiddle example

你需要触发 block formatting context通过结合使用 overflow 属性和 float 属性。

另请参阅:http://www.w3.org/TR/CSS21/visuren.html#block-formatting , http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ , 和 How does the CSS Block Formatting Context work?有关 block 格式化上下文的一些有用信息。