溢出效果：自動浮動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>