介绍

在外部div不确定高度，且内部div是float样式时，让外部div随内部div的高度变化而变化，需要在外部的div上加上该样式

提出问题

css

内部div是浮动
外部div没有设置高度，想让 内部div撑起外部div的高度

<style>
    .wrapper{
        background-color: green;
        width: 500px;
        /*外部div没有设置高度*/
    }
    .box{
        width: 200px;
        height: 100px;
        background-color: blue;
        float: left; /*内部div是浮动*/
    }
</style>

html

<div class="wrapper">
    <div class="box"></div>
</div>

结果

外部div 没有被 内部div撑起高度

在浏览器检查中，看到 wrapper的 div 高度是 0，如下图：

解决

在 外部 div 增加 overflow: hidden;，如下：

.wrapper{
    background-color: green;
    width: 500px;
    overflow: hidden; /*增加此行代码*/
}

查看结果

原文出处：/show_1IX5O1t4R83T.html