父div中的子div，float：left

Question

请查看我的代码：http://jsfiddle.net/XptrZ/ 为什么红色的div里面没有蓝色的div，为什么红色的div的高度= 0。 我怎么解决这个问题？ 感谢

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>

Answer 2

添加display：table;在父母内部。那会有用。

Answer 3

使用以下格式向父div添加一个额外的空div：

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