解决高度塌陷问题 - 1
根据W3C的标准,在页面中元素都有一个隐含的属性叫作Block Formatting Context,简称BFC,该属性可以设置打开或者关闭,默认是关闭的。
- 当开启元素的BFC之后,元素将会具有以下特性
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动的子元素
- 如何开启元素的BFC
- 设置元素浮动
- 使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且使用这种方式也会导致下面的元素上移,不能解决问题。
- 设置元素绝对定位
- 设置元素为
inline-block
- 可以解决问题,但是会导致宽度丢失,不推荐使用这种方式。
- 设置元素的
overflow
为一个非visible
的值scroll
、auto
、hidden
- 设置元素浮动
推荐方式:将
overflow
设置为overflow: hidden;
是副作用最小的开启BFC的方式。
不幸的是,在IE6及以下的浏览器中并不支持BFC,所以使用这种方式不能兼容IE6。
在IE6中虽然没有BFC,但是具有另一个隐含的属性叫作HasLayout.
该属性的作用和BFC类似,在IE6及以下浏览器中可以通过开启HasLayout来解决该问题。
开启方式有很多,我们直接使用副作用最小的:
- 将元素的
zoom
设置为zoom: 1;
即可
zoom表示放大,后面的数值表示放大的倍数。 zoom: 1;
表示不放大元素,但是通过该设置可以开启HasLayout。
是这种方法只支持IE8及以下的浏览器,不支持任何其他浏览器。
综上,我们通常会在需要兼容IE6时如下编写样式:
zoom: 1;
overflow: hidden;
如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/45.html