最详细的高度塌陷解决方案

在网页布局中我们经常会遇到高度塌陷的这样的问题，那么什么是高度塌陷呢？

什么是高度塌陷?

父元素高度自适应，子元素float之后，造成父元素高度为0，称为高度塌陷。他的产生条件就是子元素浮动

如何解决高度塌陷呢？

这里作者总结了8中解决方法和每种方法的优缺点

方案一

给父元素添加固定高度，适合做高度固定的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            /* 添加固定高度 */
            height: 400px;
            border: 5px solid red;
        }
        .son {
            width: 200px;
            height: 200px;
            background: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

优点：简单、代码少、容易掌握

缺点：只适合做高度固定的布局，要给出精确的高度，如果和父级div不一样时，会产生新的问题

建议：不推荐使用，只建议高度固定的布局使用

方案二

给父元素添加overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 5px solid red;
            /* 使用overflow:hidden可以让父元素的盒子自动撑开
            	注意为了解决IE兼容问题我们需要添加zoom:1属性
            */
            overflow: hidden;
        }
        .son {
            width: 200px;
            height: 200px;
            background: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

优点：简单，代码少，浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸会被隐藏

建议：在页面布局中如果经常使用到定位不建议使用这个方法解决高度塌陷问题

方案三

给父元素结尾添加div标签clear:both

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 5px solid red;
        }
        .son{
            width: 400px;
            height: 400px;
            background-color: yellow;
            float:left;
        }
        span{
            clear: both;
            /* 下面两行代码是解决IE兼容问题，因为在IE兼容部分块元素会自带16px的高度 */
            height: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
        <div></div>
    </div>
</body>
</html>

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理，需要增加多余的空标签，让人感觉不好

建议：不推荐使用，但是此方法是以前主要是用的一种清除浮动的方法

方案四

万能清除法(更适合整站开发)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 5px solid red;
        }
        .son {
            width: 400px;height: 400px;
            background: yellow;
            float: left;
        }
        .parent::after{
            content: "";
            display: block;
            clear: both;
            /* height:0;和overflow:hidden;是为了解决IE兼容的问题 */
            height: 0;
            overflow: hidden;
            /* visibility:hidden;是为了去除content中的文字 */
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

优点：浏览器支持好、不容易出现怪问题

缺点：代码多、不少初学者不理解原理，要两句代码结合才能让主流浏览器都支持

建议：推荐使用，建议定义公共类，以减少CSS代码

方案五

父级定义overflow:auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 5px solid red;
            /* 此方法与overflow:auto的原理是一样不过auto是内容超出后出现滚动条 */
            overflow: auto;
        }
        .son {
            width: 400px;
            height: 400px;
            background: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">使用父级元素dingyioverflow:auto方法</div>
    </div>
</body>
</html>

优点：简单、代码少、浏览器支持好

缺点：内部宽度超过父元素容器之后，会出现滚动条

建议：由于会出现滚动条的原因不推荐大家使用

方案六

父级容器一起浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <style>

        .parent{
            border: 5px solid red;
            float: left;
        }
        .son {
            width: 400px;
            height: 400px;
            background: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

优点：没有优点

缺点：会产生新的浮动问题

建议：不推荐使用，出现各种各种问题，了解就好

方案七

父级容器定义display:table;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 5px solid red;
            /* 改变元素类型 inline-block/flex/inlin-flex/table/table-cell/table-caption都可以 */
            display: table;
        }
        .son{
            width: 400px;
            height: 400px;
            background: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">父级元素类型定义为table</div>
    </div>
</body>
</html>

方案八

给父元素结尾添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            border: 5px solid red;
        }
        .son {
            width: 400px;
            height: 400px;
            float: left;
            background: yellow;
        }
        /* 给br标签清除浮动 */
        br{
            clear: both;
            height: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">给父元素结尾添加br标前然后clear:both;</div>
        <br>
    </div>
</body>
</html>

优点：代码少，浏览器支持好

缺点：造成多余代码，而且br标签在页面本来就是会换行的作用不符合语义化规范

建议：不推荐使用，只做了解

---