码迷,mamicode.com
首页 > 其他好文 > 详细

解决父级元素高度塌陷问题的方法

时间:2014-08-11 20:40:32      阅读:347      评论:0      收藏:0      [点我收藏+]

标签:style   使用   strong   ar   问题   size   on   sp   

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

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

 

解决父级元素高度塌陷问题的方法,布布扣,bubuko.com

解决父级元素高度塌陷问题的方法

标签:style   使用   strong   ar   问题   size   on   sp   

原文地址:http://www.cnblogs.com/anxiaobei/p/3905187.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!