CSS高度坍塌问题的原因以及解决办法

原因:

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            border: 1px solid;
        }

        .c1,.c2 {
            width: 100px;
            height: 100px;
            float: left;
        }

        .c1 {
            background: red;
        }

        .c2 {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</body>
</html>

　　

解决办法:

1、给父元素一个固定高度,但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以此方法适用于子元素高度已知并且固定的情况,是不推荐使用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            border: 1px solid;
            height: 200px;
        }

        .c1,.c2 {
            width: 100px;
            height: 100px;
            float: left;
        }

        .c1 {
            background: red;
        }

        .c2 {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</body>
</html>

　　

2、在父元素最后添加一个空的div，为这个div设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            border: 1px solid;
        }

        .c1,.c2 {
            width: 100px;
            height: 100px;
            float: left;
        }

        .c1 {
            background: red;
        }

        .c2 {
            background: blue;
        }

        .clear {clear: left;}
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

　　

3、给父元素添加 overflow：hidden；这是开发中最应用最多的一种做法。

这个属性和值是当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉。
当子元素浮动时，给父元素添加overflow：hidden，按照它的本身特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            border: 1px solid;
            overflow: hidden;
        }

        .c1,.c2 {
            width: 100px;
            height: 100px;
            float: left;
        }

        .c1 {
            background: red;
        }

        .c2 {
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</body>
</html>

　　

4、通过伪元素选择器::after清除浮动,缺点代码过多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            border: 1px solid;
        }

        .c1,.c2 {
            width: 100px;
            height: 100px;
            float: left;
        }

        .c1 {
            background: red;
        }

        .c2 {
            background: blue;
        }

        .box::after {
            content: "";
            display: block;
            clear: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
</body>
</html>

　　

总结:推荐使用第三种解决方案,代码量和带来的影响最小。