子元素浮动导致父元素高度塌陷解决方案

作者: 杨康他兄弟 | 来源:发表于2019-11-29 23:27 被阅读0次

清除浮动的几种常用方法
高度塌陷清除浮动定位
前端07day
塌陷，导航，定位
高度坍塌
浮动导致的父容器高度塌陷
高度塌陷
高度塌陷、BFC开启、去除项目符号
前端零碎知识集锦
清除浮动

高度塌陷是指父元素在未指定高度的情况下(高度自适应子元素高度)，其内部的子元素因为设置了浮动属性，脱离文档流，导致父元素高度因为子元素的脱离变成了0。
形象化如图所示：
css.css

.header {
    background-color: #333333;
    width: 100%;
    height: 60px;
}

.content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
}

.content .directory {
    background-color: chartreuse;
    width: 240px;
    height: 500px;
    float: left;
}

.content .itemlist {
    background-color: #CCCCCC;
    width: 240px;
    height: 500px;
    float: left;
}

.footer {
    background-color: #333333;
    width: 100%;
    height: 100px;
}

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css">
        <link rel="stylesheet" href="css/index_page.css" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/page.css" />
        <script type="text/javascript" src="js/vue.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body>
        <div class="header"></div>
        
        <div class="content">
            <div class="content directory"></div>
            <div class="content itemlist"></div>
        </div>
        
        <div class="footer"></div>
    </body>
</html>

效果如下：

image.png

这里给出我个人认为的最好的解决方案，使用伪类元素，再用伪类元素清除浮动。
方案如下：
css.css

.header {
    background-color: #333333;
    width: 100%;
    height: 60px;
}

.content {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
}

/*伪类元素*/
.content:after {
    content: "";
    display: block;
    clear: both;
}

.content .directory {
    background-color: chartreuse;
    width: 240px;
    height: 500px;
    float: left;
}

.content .itemlist {
    background-color: #CCCCCC;
    width: 240px;
    height: 500px;
    float: left;
}

.footer {
    background-color: #333333;
    width: 100%;
    height: 100px;
}

效果如下：

image.png