什么是高度塌陷？

当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为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和div浮动之后:

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

我们可以发现，当子元素全都浮动后，父元素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;}

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

触发BFC的方法：

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

BFC的使用场景：

1. 去除边距重叠现象

2. 清除浮动（让父元素的高度包含子浮动元素）

3. 避免某元素被浮动元素覆盖

4. 避免多列布局由于宽度计算四舍五入而自动换行

可以再加上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>

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

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

mencre

发布了163 篇原创文章 · 获赞 193 · 访问量 29万+

私信关注