武汉web培训
达内武汉中心

15827352908

热门课程

css解决父元素高度坍塌

  • 时间:2016-06-23 11:37
  • 发布:ascend
  • 来源:web前端网

如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”,如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了。解决“高度塌陷”的问题很简单:

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以及以下版本都不兼容。此方法可以说是综合起来最好的方法了,不会影响任何其他样式,通用性强,覆盖面广

马上预约七天免费试听课

姓名:

电话:

上一篇:JQuery each()方法的使用
下一篇:如何让子类继承父类的方法和属性

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊