父div中的子div，float：left

請看看我的代碼：http://jsfiddle.net/XptrZ/ 爲什麼不是紅色內部的藍色div，以及爲什麼紅色的div具有height = 0。我該如何解決這個問題？由於父div中的子div，float：left

2012-01-17 Tamás Pap

添加overflow: hidden到父

.parent { 
 
    background-color: gold; 
 
    border: 1px solid gold; 
 
    position: relative; 
 
    overflow: hidden 
 
} 
 

 
.child { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: block; 
 
    margin: 10px; 
 
    background-color: pink; 
 
    border: 1px solid #999; 
 
}

<div class="parent"> 
 
    <div class="child">div1</div> 
 
    <div class="child">div2</div> 
 
    <div class="child">div3</div>  
 
</div>

來源

2012-01-17 18:16:03

謝謝佐爾坦。它完美的作品。你能給我一個解決方案的簡短解釋嗎？我想明白這一點。謝謝 – 2012-01-17 18:29:15

由浮標取出正常文檔流程所導致的問題。另一側的「overflow：hidden」建立了一個新的塊格式化上下文（http://www.w3.org/TR/CSS21/visuren.html#block-formatting），並且再次成爲浮動元素的父元素。 – 2012-01-17 19:06:33

添加顯示：表;裏面的父母。這會工作。

來源

2012-01-17 18:18:48 srijan

IE7及以下版本不支持'display：table' - http://www.quirksmode.org/css/display.html「Below」 - 這可能不是一個大問題，但您仍然需要考慮IE7 – 2012-01-17 18:21:17

感謝信息。 – srijan 2012-01-17 18:43:52

添加一個額外的空div來父div使用該格式：

<div style="clear:both"></div>

來源

2014-07-24 07:07:31 Ahmad

父div中的子div，float：left

回答

相關問題