时间戳

首页 > 解决方案 > 当溢出隐藏应用于其容器时，为什么浮动元素不会被隐藏？

css - 当溢出隐藏应用于其容器时，为什么浮动元素不会被隐藏？

问题描述

我可以理解这段代码。

.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>

标签： css

解决方案

声明除了将建立一个新的块格式化上下文overflow之外的任何值，这使得包含它的孩子。你也可以像这样声明达到同样的“清除”效果。visibledivposition: 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>

有关默认情况下如何确定元素高度的更多信息，请参阅此处

有关更多信息，请参阅此处

推荐阅读