Question

简短版本：为什么overflow:auto会导致左侧浮动div右侧的div不将其文本包裹在左侧浮动的div周围？（额外奖励：这是完成列效应的可接受方式吗？）

长版......

我有两个div我希望彼此相邻，并显示为列。左侧的div具有特定的宽度和高度。左侧的div比右侧的div短。但是，我不希望右div中的文本包含在左边的div下。

这是我的第一次尝试......

<div>
    <div style="border:1px solid grey;
        width:100px;
        height:100px;
        float:left;">
        Div on the left.
    </div>
    <div>
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>

...我知道右侧div中的文字将包裹在左侧div下方。确实如此。

然后我想起了我创建的一个具有列效果的页面。我已经复制并粘贴了它，我不知道在哪里。它所做的只是将overflow:auto分配给右侧的div。它看起来像这样......

<div>
    <div style="border:1px solid grey;
        width:100px;
        height:100px;
        float:left;">
        Div on the left.
    </div>
    <div style="overflow:auto">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>

Voila，正确的div文字不再包含在第一个（左）div下面！第二个（右）div作为列出现。

所以，我读了overflow:auto上我能找到的所有内容，但没有提到为什么我应该看到这种行为。任何人都可以向我解释一下吗？

此外，这是实现柱效的可接受方式吗？

Answer 1

为了让div彼此相邻，他们都需要一个浮动并适合周围的div。

示例：

<div style="width:200px;"> <div style="width:100px; float:left;"> content </div> <div style="width:100px; float:left;"> content </div> </div>

如果你想让轮廓div与最大的div overflow:hidden;一起增长到div ..如果那个div没有它的高度那么它将与bigs div一起扩展。

预览： http://jsfiddle.net/WzVBE/

Answer 2

从第一个div中删除float:left。

<div>
    <div style="border:1px solid grey; width:100px; height:100px;">
        Div on the left.
    </div>
    <div style="overflow:auto;  ">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>

<强> DEMO

Answer 3

你可以试试这个

<div style="width:800px; background-color:#CCC">
    <div style="width:300px; height:100px; float:left; background-color:#CCC">
        Div on the left.
    </div>
    <div style="height:100px; float:left; width:500px; background-color:#999">
        Imagine lots and lots of text here...
    </div>
    <div style="clear:both"/>
</div>

Answer 4

overflow: auto（或除visible之外的任何内容）会导致您的第二个div创建新的block formatting context。这意味着div中的文本现在位于其自己的格式化上下文中，而不是与您的第一个左浮动div（包含的块 div s），因此不再允许它绕过第一个div。

Floats也会生成他们自己的BFC，但这与手头的事情并不完全相关。然而，它也会阻止回流，实现柱效，如其他答案所示。

这是创建列效果的可接受方式吗？我不知道，但它看起来似乎非常规。你也可以浮动第二个div而不是出于上面提到的原因（尽管如此，有利于即将推出的真实布局模式，如flexbox和网格，现在被视为浏览器兼容性黑客，但是我们暂时得到的最好的。）

请记住，内联内容旨在能够在浮动内容周围自然流动;见CSS2.1, §9.5 Floats。

还要记住，overflow的目的是在大小有限的框中控制内容溢出。它导致一个盒子创建一个新的BFC，结果影响浮动，只是一个副作用，其原因探讨here。这是一个冗长的阅读，但它包括一些关于防止回流的内容，为了便于参考，我在这里引用：


因此，这一变化是在CSS2.1中引起的，记录为here。现在，如果您将overflow以外的visible值仅应用于第二个框，那么浏览器所做的就是将整个框推到一边，为浮动让路，因为框现在创建一个新的块格式化上下文，它包含其内容，而不是在浮动周围流动。以下是overflow: auto的示例：



请注意，没有许可;如果第二个框有clear: left或clear: both，则无论是否建立了自己的BFC，它都会被向推送，而不是推向一边。

顺便说一句，是的，这意味着如果您想要始终清除第一个div，那么您的结算div必须在那里。

溢出的影响：自动对浮动的div

4 个答案: