溢出效果：自动浮动div

Question

简短版本：为什么overflow:auto导致div在左侧浮动的右侧div不能将其文字围绕左侧浮动的div？ （奖励：这是实现列效果能够接受的方式？）

长版...

我有希望成为下一个到两个彼此div S，和列中显示。左侧的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> 

瞧，右div s的文字不再受第一（左）div包裹！第二个（右）div显示为一列。

因此，我阅读了所有我能找到的关于overflow:auto的内容，并没有发现为什么我应该看到这种行为。任何人都可以解释给我吗？

此外，这是一个可以接受的方式来实现列效应？

Answer 1

overflow: auto（或什么，但visible）使你的第二个div创建一个新的block formatting context。这意味着div中的文本现在处于其自己的格式化上下文中，而不是与第一个左浮动的div（它是包含的块div s）共享相同的文本，因此不再允许围绕第一个div流动。

花车也会生成自己的BFC，但这并不完全与手头的事情有关。但是，它也会阻止回流，达到列效果，如其他答案所示。

这是创建列效果的可接受方式吗？我不知道，但它确实看起来非常规。你可以漂浮第二个div，而不是出于上面提到的原因（虽然即使这样，赞成即将到来的真正的布局模式，如flexbox和网格，现在被视为浏览器兼容性黑客攻击这些天，但是我们最好的暂时得到）。

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

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

因此，这种变化带来的CSS2.1，记录here。现在，如果将除visible之外的overflow值仅应用于第二个框，浏览器所做的就是将整个框推到一旁，以便为浮点型创建路由器，因为该框现在创建一个新的块格式上下文来封装其内容，而不是在浮子周围流动。下面是它看起来像overflow: auto例如：

注意，没有过关;如果第二个盒子有clear: left或clear: both，它将被推下而不是旁边，无论它是否建立了自己的BFC。

顺便说一句，是的，这意味着你的结算，如果你要经常清除第一divdiv需要存在。

Answer 2

要获得的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犯规的高度与它，然后它会随着规模拉尔DIV。

前瞻： http://jsfiddle.net/WzVBE/

Answer 3

从第一个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 4

你可以试试这个

<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>