父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

回答

相关问题