爲什麼溢出：隱藏不隱藏？

下面的HTML的目標是在同一水平線上有紅色和藍色的div，甚至認爲藍色div由於寬度較大而被截斷。 This jsfiddle顯示即使黑色/容器樣式具有overflow:hidden藍色div不會被截斷。這個HTML有什麼問題？爲什麼溢出：隱藏不隱藏？

<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;"> 
    <div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div> 
    <div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div> 
</div>

來源

2014-07-08 ps0604

要隱藏在這裏做什麼，內格比外層div – Kasma

小得多'div's強制換行作爲其默認的顯示屬性爲'block'。 – shennan

這是你在http://jsfiddle.net/j08691/4n23D/之後？ – j08691

浮動元素將水平堆疊，直到到達其父容器的邊緣。此時，下一個浮動元素將落到下一行，其餘元素將再次堆疊在一起。

爲了達到你要找的效果，你將需要一個容器的父容器，這個容器的寬度足以容納所有的浮動元件。

那麼，只有這樣，你可以放置另一個容器放在父母的周圍，它將會限制溢出。

<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;"> 
    <div style="width:800px"> 
     <div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div> 
     <div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div> 
    </div> 
</div>

http://jsfiddle.net/THEtheChad/me4gj/7/

來源

2014-07-08 00:59:04 THEtheChad