css高度塌陷问题以及兼容IE6

最新推荐文章于 2021-10-04 18:30:00 发布

原创最新推荐文章于 2021-10-04 18:30:00 发布 · 256 阅读

CC 4.0 BY-SA版权

文章标签：

24 篇文章

订阅专栏

本文详细解析了CSS高度塌陷问题及其在IE6中的兼容性处理，阐述了BFC与hasLayout特性的应用，提供了有效解决高度塌陷问题的策略。

首先我们要明白什么是高度塌陷：在父元素不设置高度的情况下，其高度是由子元素所撑开的，如果子元素脱离文档流，父元素就会出现高度塌陷的问题。

元素未脱离文档流的情况：

  <div class="box">
	<div class="inner"></div>
  </div>
  <div class="wrap"></div>

	.box{
	  border:10px solid red;
	}
	.inner{
	 width:100px;
	 height:100px;
	 background:green;
	}
	.wrap{
	  height:100px;
	  background:blue
	}

页面效果：
在这里插入图片描述
使用浮动让.inner脱离文档流：

	.inner{
	 width:100px;
	 height:100px;
	 background:green;
	 float:left
	}

页面效果：
在这里插入图片描述
可以看见当子元素脱离文档流，父元素没有内容支撑，就出现的高度塌陷的问题。

在W3C标准中有一个比较隐秘的属性叫做Block Formatting Context简称BFC，开启BFC就能解决高度塌陷的问题。

BFC直译为"块级格式化上下文，默认是关闭的，当开启它之后，元素会具有如下特性：
1.父元素的垂直外边距不会和子元素重叠。
2.元素不会被浮动元素所覆盖。
3.元素可以包含浮动的元素。

开启BFC的方法有多种，如下：

推荐方式：将overflow设置为hidden是开启BFC副作用最小的方式。

	.box{
	  border:10px solid red;
	  overflow:hidden
	}

页面效果：
在这里插入图片描述
可以看见在父元素上添加overflow:hidden开启BFC就能很好的解决元素高度塌陷的问题。

因为在IE6及以下版本浏览器中并不支持BFC，所以使用以上的方式就不能解决元素高度塌陷的问题。

那么应该如何解决呢？

在IE6及以下版本浏览器中虽然没有BFC的概念，但是也有一个比较隐秘的属性，跟BFC类似，叫做hasLayout。
所以在IE6及以下浏览器中开启hasLayout就能解决高度塌陷的问题。

开启hasLayout的方式有很多，但是我们一般只选择副作用比较小的：zoom:1。
zoom是放大倍数的意思，值为1就是放大1倍，写不写这个样式界面都是一样的，但是可以开启hasLayout，解决高度塌陷的问题。

注意：zoom只在IE中支持，其他浏览器都不支持。

	.box{
	  border:10px solid red;
	  overflow:hidden;
	  zoom:1
	}

这样就能完美的解决所有浏览器中元素的高度塌陷问题了！！！