解决高度塌陷问题 - 1

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

根据W3C的标准,在页面中元素都有一个隐含的属性叫作Block Formatting Context,简称BFC,该属性可以设置打开或者关闭,默认是关闭的。

  • 当开启元素的BFC之后,元素将会具有以下特性
    1. 父元素的垂直外边距不会和子元素重叠
    2. 开启BFC的元素不会被浮动元素所覆盖
    3. 开启BFC的元素可以包含浮动的子元素
  • 如何开启元素的BFC
    1. 设置元素浮动
      • 使用这种方式开启,虽然可以撑开父元素,但是会导致父元素的宽度丢失,而且使用这种方式也会导致下面的元素上移,不能解决问题。
    2. 设置元素绝对定位
    3. 设置元素为inline-block
      • 可以解决问题,但是会导致宽度丢失,不推荐使用这种方式。
    4. 设置元素的overflow为一个非visible的值
      • scrollautohidden

推荐方式:将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