当溢出隐藏应用于其容器时，为什么浮动元素不会被隐藏？ [复制]答案

【问题标题】：why floated element do not gets hidden when overflow hidden is applied to its container? [duplicate]当溢出隐藏应用于其容器时，为什么浮动元素不会被隐藏？ [复制]
【发布时间】：2020-11-24 19:05:21
【问题描述】：

我能看懂这段代码。

.container {
  border: 2px solid black;
}

.float {
  border: 2px solid red;
  float: left;
}

<!DOCTYPE html>
<html>

<body>

  <div class="container">

    <div class="float">i am float</div>

  </div>

</body>

</html>

但是当溢出隐藏应用于容器元素时，为什么浮动元素没有像overflow:hidden; 的描述那样被隐藏。相反，容器元素将自身包裹在浮动元素周围。卡姆你解释一下？

.container {
  border: 2px solid black;
  overflow: hidden;
}

.float {
  border: 2px solid red;
  float: left;
}

<!DOCTYPE html>
<html>

<body>

  <div class="container">

    <div class="float">i am float</div>

  </div>


</body>

</html>

【问题讨论】：

.container 的 div 将从哪个元素隐藏
@ShayanKanwal 如果您指的是我的答案，它是 .container div 中的任何内容，并且大于您对 div 施加的约束。
如果元素是浮动的，你只能对容器做一些假设
@John 你是对的！

标签： css

【解决方案1】：

声明overflow 以外的任何值visible 将建立一个新的block formatting context，这使得div 包含它的孩子。你也可以声明position: absolute来达到同样的“清除”效果。

.container {
  border: 2px solid black;
  overflow: hidden;
}

.float {
  border: 2px solid red;
  float: left;
  position: absolute;
}

  <div class="container">
    <div class="float">i am float</div>
</div>

请参阅here 了解有关默认情况下如何确定元素高度的更多信息

更多信息请参考here

【讨论】：

感谢您的链接。我们永远学不完

【解决方案2】：

这是因为你的容器没有任何宽度或高度限制，所以它会随着里面的任何东西一起增长。看看这个，我在容器 CSS 中添加了height: 10px，看看当溢出被隐藏和可见时会发生什么：

隐藏：

.container {
  border: 2px solid black;
  height: 10px;
  overflow: hidden;
}

.float {
  border: 2px solid red;
  float: left;
}

<body>
  <div class="container">
    <div class="float">i am float</div>
  </div>
</body>
</html>

可见：

.container {
  border: 2px solid black;
  height: 10px;

}

.float {
  border: 2px solid red;
  float: left;
}

<body>
  <div class="container">
    <div class="float">i am float</div>
  </div>
</body>
</html>

【讨论】：