为什么溢出:隐藏解决浮动?

Question

我不明白为什么overflow: hidden解决我的浮动问题：我不希望单词在左边的图片中。

我还阅读了了解CSS布局和块格式上下文。

该示例取自 https://internetingishard.com/html-and-css/floats/但缺乏对原因的解释。

.column {
overflow: hidden;
float: left;
width: 31%;
margin: 20px 1.15%;
height: 160px;
background-color: #B2D6FF;
/* Medium blue */
}
.avatar {
float: left;
width: 60px;
height: 60px;
margin: 25px;
border-radius: 40px;
background-color: #D6E9FE;
}
.username {
margin-top: 30px;
}
.comment {
margin: 10px;
overflow: hidden;
/* This is important */
}

<div class='column'>
<div class='avatar'></div>
<h3 class='username'>Bob Smith</h3>
<p class='comment'>Aptent vel egestas vestibulum aliquam ullamcorper volutpat</p>
</div>

Answer 1

当您浮动某些内容时，它会从文档"flow"中删除，因此容器将忽略该元素，因为它已从所述流中删除。添加 overflow： hidden 属性时，您告诉该容器重新包含浮动元素并将其合并到其大小调整中。