爲什麼將盒子從父盒子中移出？

Question

有時候，浮動框出來的父框，我必須添加「寬度：100％;溢出：隱藏」，以阻止這種情況。

那麼，爲什麼浮動盒子可以超出家長？這是一個標準的行爲？

<div style=" border:1px solid #F00"> 
    <div style="float:left">float</div> 
</div> 

Answer 1

這是一個陷阱，我認爲每個人都陷入了陷阱，可能不止一次。

下面是理解CSS如何彩車工作的一些好的資源：

• http://css-tricks.com/all-about-floats/看到一個名爲 「大崩潰」
• http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
• http://phrogz.net/css/understandingfloats.html

Answer 2

浮動元素的部分從正常文檔流中刪除。爲了讓他們的父級環繞它們，你需要在浮點數後面加上clear:屬性集。

<div style=" border:1px solid #F00"> 
    <div style="float:left">float</div> 
    <br style="clear:both;" /> 
</div> 

Answer 3

您需要在包含樣式規則clear：float的浮動div之後添加另一個div。包含單個浮動子div的div總是會崩潰並讓它浮出。