什么是高度塌陷?
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。
原代码:
<div id="yeluosen">
<div id="a1"></div>
<div id="a2"></div>
</div>
1.加一个空div标签清除浮动(缺点:不利于优化,优点:兼容性强)
<div style="clear:both"></div>
2. overflow+zoom(优点:兼容性强。 缺点:对margin属性有影响,不能设负值,设负值无效。负值绝对定位也不可以。)
#yeluosen{
overflow:hidden;
zoom:1;
}
3.after+zoom (最好用的,最推荐的,兼容性也很好)
#yeluosen{ //兼容IE
zoom:1
}
#yeluosen:after{ //在父元素后添加空内容并清除浮动影响
display:block;
content:'',
clear:both; //清除浮动影响
height:0;
overflow:hidden //溢出隐藏
}
4.让父元素本身也浮动(不推荐,如果也设置浮动,父元素宽度就会随着子元素变化)
#yeluosen{
float:left;
}