CSS盒子塌陷及解决方法

1 盒子塌陷的原因

什么是盒子塌陷？

外部的盒子没有包裹住内部的浮动盒子，导致了盒子塌陷。

盒子高度塌陷原因？

①父元素没有设置高度（height）；

②且其子元素脱离了文档流，导致内部没有元素可以撑起当前父元素：

a. 内部子元素使用了浮动导致内部元素脱离了文档流，且脱离文档流的元素无法撑起当前父元素。
b. 内部子元素使用了绝对定位或者固定定位脱离文档流。

示例：设置一个父div和一个子div，首先不设置父盒子的高度，给父盒子设置宽度，然后为子盒子设置宽度和高度

    <div class="father">
        <div class="child"></div>
    </div>
    <style>
        .father {
            width: 200px;
            background-color: pink;
        }
        .child {
            width: 100px;
            height: 80px;
            background-color: orange;
        }
    </style>

在上面的例子中，由于父盒子没有设置高度，因此高度是子盒子的高度。那么如果给子盒子添加浮动属性，就会造成高度塌陷：

        .child {
            width: 100px;
            height: 80px;
            float: left;
            background-color: orange;
        }

2 如何清除塌陷

1、将盒子大小写死，给每个盒子设定固定的width和height，直到合适为止。

优点：简单方便；
缺点：非自适应，浏览器的窗口大小直接影响用户体验。

2、给外部的父盒子也添加浮动，让其也脱离标准文档流。

优点：方便；
缺点：对页面的布局不是很友好，不易维护。

因此在上面的例子中，同时为父盒子和子盒子添加浮动，也会显示完整的效果：

    <div class="father">
        <div class="child"></div>
    </div>
    <style>
        .father {
            width: 200px;
            background-color: pink;
            /* 为父盒子添加浮动 */
            float: left;
        }
        .child {
            width: 100px;
            height: 80px;
            float: left;
            background-color: orange;
        }
    </style>

3、给父盒子添加overflow:auto;或者overflow:hidden;。

优点：浏览器支持好，简单；
缺点：当子元素有定位属性时overflow:auto;有可能出现滚动条，影响美观。overflow:hidden;可能会带来内容不可见的问题。

4、父盒子里最下方引入清除浮动块

<div style="clear:both"></div>

优点：所有浏览器都支持，并且容器溢出不会被裁剪；
缺点：引入了不必要的冗余元素 。

因此上面的例子中，可以在子盒子下面添加一行代码，解决盒子塌陷：

    <div class="father">
        <div class="child"></div>
        <!-- 添加清除浮动块 -->
        <div style="clear:both"></div>
    </div>
    <style>
        .father {
            width: 200px;
            background-color: pink;
        }
        .child {
            width: 100px;
            height: 80px;
            background-color: orange;
            float: left;
        }
    </style>

5、为外部盒子添加after伪类，设置clear属性清除浮动（主流）。

        父盒子::after {
            content: "";
            /* 清除两边的浮动 */
            clear: both;
            /* 也可以使用display:table; */
            display: block;
            /* 兼容IE浏览器 */
            zoom: 1;
        }

优点：不会造成代码冗余，剩余代码性能优化，推荐使用。

在本例中，为父盒子写入伪类清除浮动：

    <div class="father">
        <div class="child"></div>
    </div>
    <style>
        .father {
            width: 200px;
            background-color: pink;
        }
        .child {
            width: 100px;
            height: 80px;
            background-color: orange;
            float: left;
        }
        /* 添加伪类清除浮动 */
        .father::after {
            content: "";
            clear: both;
            display: block;
            zoom: 1;
        }
    </style>