分析:
浮动float属性会使得元素脱离当前HTML文档流,那么会使得:当前HTML文档会当作设置float属性的元素不存在一样。那么,由于这5个子元素都设置了float,所以可以看作父元素#container内根本没有内容,div在没内容的时候表现正好是高度=0.
解决方法:
1设置父元素float
例如:
#container {
background-color: #f1f1f1;
width: 80%;
margin: 20px auto;
float: right;
} 这样,父元素也是脱离当前文档流,子元素和父元素一起脱离,并且子元素仍在父元素内,父元素内容不空了,所以高度会适应子元素高度。
2在最后一个设置浮动的子元素后加一个空div ,并且让这个div清除浮动。
例如<div class="items"></div>
.items {clear: both;}
3父元素设置overflow:hidden;
4不要用浮动,而使用:子元素使用display:inline-table或者display:inline-block
转自:http://www.cnblogs.com/leechanx/p/3322613.html