为什么溢出：隐藏解决浮动？ [复制]答案

【问题标题】：Why overflow: hidden solves floating? [duplicate]为什么溢出：隐藏解决浮动？ [复制]
【发布时间】：2018-09-30 00:28:12
【问题描述】：

我不明白为什么 overflow: hidden 解决我的浮动问题：我不希望文字出现在左侧图片中。 p>

我也读过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>

【问题讨论】：

这只是一个 CSS “hack”。
从 CSS 初学者的角度来看（我的观点）：每个 CSS 解决方案都是 CSS hack。是时候真正理解事物了。
看看this post
@QuentinVeron 这远非 hack ;)
@TemaniAfif 随心所欲地调用它，但对我来说这只是另一个 CSS hack。

标签： html css css-float

【解决方案1】：

当您浮动某些东西时，它会从文档“流”中删除，因此容器将忽略该元素，因为它已从所述流中删除。当您添加 overflow: hidden 属性时，您是在告诉该容器重新包含浮动元素并将其合并到其大小中。

【讨论】：

谢谢，但我想你没有回答我的问题：为什么 overflow: hidden解决这个具体的 浮动问题：我不希望文字出现在左侧图片中。