一篇文章完美解决CSS中页面高度塌陷的问题

问题产生的原因

在文档流中，父元素高度默认是被子元素撑开的，也就是说，子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素就会脱离文档流，此时就会导致子元素无法撑起父元素的高度，导致父元素出现高度塌陷的问题。

<style>
    .box1 {
        border: 1px solid deeppink;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: deepskyblue;
        float: left;    /* 子元素浮动 */ 
    }

    .box3 {
        height: 80px;
        background-color: yellowgreen;
    }
</style>
<body>
    <div class="box1">
        <div class="box2">子元素</div>
    </div>
    <div class="box3">
        footer
    </div>
</body>

子元素浮动前，布局正常

子元素浮动以后会脱离文档流

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面的布局混乱。
所以在开发中一定要避免出现高度塌陷的问题。

解决高度塌陷的原理

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

开启元素的BFC以后，元素将会具有如下特性。

父元素的垂直外边距不会跟子元素重叠。
开启BFC的元素不会被浮动元素所覆盖。
开启BFC的元素可以包含浮动的子元素。

如何开启元素的BFC

设置元素的浮动
-- 使用这种方式虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也对导致下边的的元素上移，不能解决问题。
设置元素绝对定位(和设置元素的浮动效果一样，所以也不推荐使用)
设置元素的 display 属性的值为 inline-block
-- 可以解决问题，但是也会导致宽度丢失，也不推荐使用这种方式。
将元素的 overflow 设置为 非visible 的值。
-- 推荐方式将 overflow 设置为 hidden 或 auto 是一种副作用最小的开启 BFC 的方式。

兼容IE6及以下浏览器

但是在 IE6及以下的浏览器中不支持 BFC，所以使用这种方式不能兼容 IE6
在IE6中虽然没有 BFC ，但是却有另外一个隐含的值 Has Layout，该属性的作用和BFC类似，所以在IE6浏览器中可以开启Has Layout 来解决该问题。

开启Has Layout的方式有很多，我们直接使用一种副作用最小的，将元素的 zoom 属性设置为 1 即可开启 Has Layout
在IE6中如果给父元素设置了宽度，则会默认开启 Has Layout

<style>
    .box1 {
        border: 1px solid deeppink;
        width:1000px;    /*在IE6中如果给父元素设置了宽度，则会默认开启 Has Layout*/
        zoom:1;  /* 兼容IE6 */
    }
      ...
</style>

解决方案

我们可以将父元素的高度写死，以避免出现高度塌陷的问题，但是一旦高度写死，父元素的高度将不能适应子元素的高度，所以这种方案不推荐使用。

<style>
    .box1 {
        height: 200px;  /* 将父元素的高度写死 */
        border: 1px solid deeppink;
    }

    .box2 {
        width: 100px;
        height: 300px;  /* 修改子元素的高度后父元素的高度将不能适应子元素的高度 */
        background-color: deepskyblue;
        float: left;
    }

    .box3 {
        height: 80px;
        background-color: yellowgreen;
    }
</style>

<body>
    <div class="box1">
        <div class="box2">子元素</div>
    </div>
    <div class="box3">
        footer
    </div>
</body>

运行结果

如果设置了元素的浮动(开启BFC的第一种方式)

<style>
    .box1 {
        border: 1px solid deeppink;
        float: left;  /*设置父元素也浮动*/
    }
    ...
</style>

让父元素也浮动的运行结果

设置父元素的 display 属性值为 inline-block

<style>
    .box1 {
        border: 1px solid deeppink;
        display: inline-block;  /*设置父元素的 display 为 inline-block */ 
    }
    ...
</style>

设置元素的 display 属性为 inline-block 的运行结果

设置父元素的 overflow 为 非 visible 的值

<style>
    .box1 {
        border: 1px solid deeppink;
        /* overflow: auto; */  /*设置auto也可以*/
        overflow: hidden;  /* 设置 hidden 也可以 */
    }

    .box2 {
        width: 100px;
        height: 100px; 
        background-color: deepskyblue;
        float: left;
    }

    .box3 {
        height: 80px;
        background-color: yellowgreen;
    }
</style>
</head>

<body>
    <div class="box1">
        <div class="box2">子元素</div>
    </div>
    <div class="box3">
        footer
    </div>
</body>

完美解决

可以直接在高度塌陷的父元素的最后，添加一个空白的 div ，由于这个 div 并没有浮动，所以它是可以撑开父元素的高度，然后在对齐进行清除浮动。

这样可以通过这个空白的 div 来撑开父元素的高度。基本没有副作用。使用这种方法虽然可以解决问题，但是会在页面中添加多余的结构。

<style>
    .box1 {
        border: 1px solid deeppink;
    }

    .box2 {
        width: 100px;
        height: 100px; 
        background-color: deepskyblue;
        float: left;
    }

    .clearFix{
        /*清除其他元素浮动对当前元素所产生的影响*/
        clear: both;
    }

    .box3 {
        height: 80px;
        background-color: yellowgreen;
    }
</style>

<body>
    <div class="box1">
        <div class="box2">子元素</div>
        <!-- 在这个位置添加一个空白的 div -->
        <div class="clearFix"></div> 
    </div>
    <div class="box3">
        footer
    </div>
</body>

清除浮动-运行结果图

可以通过 ::after 伪类向元素后添加一个空白的块元素，然后清除浮动，这样做和添加 div 的原理一样，可以达到相同的效果，而且不会在页面中添加多余的 div ，几乎没有副作用。

<style>
    .box1 {
        border: 1px solid deeppink;
    }
    /*通过 after 伪类来设置一个空的元素 */
    .box1::after{
        content: "";  /*内容为空*/
        display: block;  /* 设置为块级元素 */ 
        clear: both;  /* 清除浮动 */
    }
    
    .box2 {
        width: 100px;
        height: 100px; 
        background-color: deepskyblue;
        float: left;
    }
    
    .box3 {
        height: 80px;
        background-color: yellowgreen;
    }
</style>

<body>
    <div class="box1">
        <div class="box2">子元素</div>
    </div>
    <div class="box3">
        footer
    </div>
</body>

通过添加 after 伪类 - 运行效果

完美解决高度塌陷的方案总结

设置父元素的 overflow 为一个非 visible 的值，hidden 和 auto 都可以。
在父元素的最后位置添加一个空的 div 标签，然后清除浮动。
清除浮动可以使用 clear 属性
该属性有 4 个可选值：

clear 属性的可选值
使用 ::after伪类在父元素的最后添加一个空白的内容，然后设置 display 属性值为 block 然后再将其清除浮动。