**问题的原因:**在CSS规范中,浮动定位不属于正常的文档流,是独立定位的。所以,只含有浮动元素的父容器,在显示时不考虑子元素的位置,就当它们不存在一样。这就造成了显示出来,父容器好像空容器一样。
解决方法:
1.在浮动元素的下面加一个空的div,并为他清除浮动。
<div class="wrap">
<div class="float">浮动</div>
<div class="clear" style="clear:both"></div>
<div class="nofloat">不想被浮动影响</div>
</div>
PS:这种情况比较适合元素之间是垂直排列布局的,为了不受彼此浮动的影响。
2.在父元素和不想被浮动影响的子元素上加overflow
<div class="wrap" style="overflow:hidden">
<div class="float">浮动</div>
<div class="nofloat" style="overflow:hidden">不想被浮动影响</div>
</div>
3.使用:after伪元素,给浮动元素的父元素清除浮动
html
<div class="wrap clearfix">
<div class="float">浮动</div>
</div>
css
.clearfix{
*zoom:1;
}
.clearfix:after{
content:'clear';
height:0;
display:block;
clear:both;
}
"display: block; clear: both;"是确保空白是非浮动的独立区块。
以下来源于百度文库
注:zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性,但是在webkit内核浏览器中zoom这个属性也是可以被支持的。