45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:css中没有设置父级元素的高度和宽度,高度塌陷为零怎么办?

css中没有设置父级元素的高度和宽度,高度塌陷为零怎么办?

2015-02-25 10:03:24 来源:www.45fan.com 【


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
Tags: css
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部