css中没有设置父级元素的高度和宽度,高度塌陷为零怎么办?解决“高度塌陷”的问题很简单:
1.浮动父级元素
如果让父级元素浮动,父级元素的高度就会扩大,直到完全包含它里面的浮动元素,虽然这个方法很奇怪,但是很有效。如果选择这种方法,一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方。
2.利用overflow:hidden,zoom:1
复制代码 代码如下:
{
overflow:hidden;
zoom:1;
}
overflow:hidden属性也是css中比较奇怪的特性,它会强制父级元素扩大到包含浮动元素,zoom:1只是触发ie6的hasLayout模式,不会对其他浏览器产生影响。
3.使用“简单清除法”
复制代码 代码如下:
.clearfix{
zoom:1;
}
.clearfix:after{
content:'';
display:block;
height:0;
font-size:0;
clear:both;
overflow:hidden;
}
其中zoom:1还是只兼容ie6,:after是css中的伪类,ie6以及以下版本都不兼容。此方法可以说是综合起来最好的方法了,不会影响任何其他样式,通用性强,覆盖面广。
本文地址:http://www.45fan.com/bcdm/9746.html