Mencre

高度塌陷的产生原因及解决方法

什么是高度塌陷?

当父元素未设置高度时,所有子元素浮动后,造成子元素脱离文档流进而无法把父元素撑开,父元素高度为0产生高度塌陷,称为高度塌陷问题。

父元素高度塌陷后,父元素以下的元素都会向上移动,导致布局混乱,所以我们要解决高度塌陷的问题。

如下代码:

<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
</div>
.box{border: 5px solid red;}
.div1{height: 100px; width: 100px; background: green;}
.div2{height: 100px; width: 100px; background: blue;}
div1
div2

当我们让div1和div浮动之后:

.div1{height: 100px; width: 100px; background: green; float: left;}
.div2{height: 100px; width: 100px; background: blue; float: right;}
div1
div2

我们可以发现,当子元素全都浮动后,父元素box的高度变为了0只剩下了边框,这就是box发生了高度塌陷。

如何解决高度塌陷?

一、解决高度塌陷最直接的办法就是给父元素添加高度

优点:简单。

缺点:只适合固定页面的布局,无法进行自适应,不推荐使用。

二、触发BFC

BFC即 Block Formatting Contexts (块级格式化上下文), 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

BFC有一个特性是计算BFC的高度时,浮动元素也参与计算,所以将box出发为BFC后可以解决高度塌陷。可以通过给.box添加overflow: hidden;等声明触发BFC。

.box{border: 5px solid red; overflow: hidden;}
div1
div2

如图所示:.box又被子元素给撑开

触发BFC的方法:

  1. 根元素;html标签就是一个BFC。
  2. float的值不为none;让父元素浮动起来,这种方式开启虽然可以解决父元素的高度塌陷问题,但父元素也会浮动,可能引起其他布局问题。
  3. display的值为inling-block/table-cell/table-caption/flex/inline-flex;
  4. overflow: auto/hidden/scroll (不为visible)
  5. position的值为absolute或fixed;

注意:IE6及以下的浏览器不支持BFC,所以通过触发BFC来解决高度塌陷不能兼容IE6及以下浏览器。在IE6中可以通过设置声明zoom:1;来触发hasLayout来解决高度塌陷问题。

BFC的使用场景:

去除边距重叠现象
清除浮动(让父元素的高度包含子浮动元素)
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行

三、给所有的浮动元素后面(即div2后)加一个空的标签。给添加的这个空标签添加声明 clear: both; 。

可以再加上height: 0; overflow: hieedn;是为了避免这个空标签如果是li的话,在IE6和IE7. 上有默认高度撑着,所以要解决一下。)  

<div class="box">
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div style="clear: both; overflow: hieedn;"></div>
</div>
    
div1
    
div2

四、万能清除法:给高度塌陷的元素添加如下after伪类

.box::after{
    content: '';
    clear: both;/清除两侧浮动/
    display: block;/转成成一个块元素/
    both; overflow: hidden;
    visibility: hidden;
}

::after对IE8以下有兼容问题,可以通过增加zoom: 1;声明来解决。

    
div1
    
div2

打赏
码字很辛苦,转载请注明来自mencre博客《高度塌陷的产生原因及解决方法》
分享到:

评论