为什么溢出：隐藏解决浮动？

Question

我无法理解 为什么 overflow: hidden解决了我的浮动问题：我不希望单词出现在左侧图片中。

我也读过Understanding CSS Layout And The Block Formatting Context。

该示例取自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

当您浮动某物时，它会从文档“流”中删除，并且由于这些元素已从所述流中删除，因此容器将忽略该元素。当您添加溢出：隐藏属性时，您是在告诉该容器重新包含浮动元素并将其合并到其大小中。