父div中的子div，float:left

Question

请看我的代码：http://jsfiddle.net/XptrZ/为什么蓝色的div不在红色的div里面，而且红色的div高度为0。我该如何解决这个问题？谢谢。

- Tamás Pap

Answer 1

将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>

- Zoltan Toth

---

谢谢Zoltan。它完美地运行了。你能给我这个解决方案的简短解释吗？我想要理解它。谢谢。 - Tamás Pap

由于浮动元素被从普通文档流中取出，因此产生了问题。另一方面，overflow: hidden 建立了一个新的块级格式化上下文（http://www.w3.org/TR/CSS21/visuren.html#block-formatting），并再次成为浮动元素的父元素。 - Zoltan Toth

Answer 2

请在父级div中添加一个额外的空div，格式如下：

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

- Ahmad

Answer 3

在父元素中添加 display: table;。这样就可以了。

- srijan

---

display: table 不支持 IE7 及以下版本 - http://www.quirksmode.org/css/display.html。"以下版本" - 这可能不是一个大问题，但你仍然需要考虑 IE7。 - Zoltan Toth