overflow: hidden 为什么能够实现这样的效果?

alex520
  • 142
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
<style>
    .father{
      background-color: #333;
      overflow:hidden;
    }
    .son{
      float:left;
    }
</style>
</head>
<body>
<div class="father">
<div class="son">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ullam maxime dignissimos delectus, hic sed odit. Fuga amet maiores voluptate tenetur, fugit dolore dolor. Accusantium ipsam, ut sed nemo harum.</p>
  </div>
</div>
</body>
</html>

请问为什么给父元素添加和不添加overflow:hidden 这个样式,显示效果不一样?

我想的是,子元素如果设置了浮动,就脱离了文档流。应该不涉及到内容溢出的可能,但设置了overflow的效果给人感觉像是浮动内容又回到了文档流。不清楚overflow属性在这起到的是什么作用?

不知道我理解的哪里有问题。麻烦各位帮忙看看?谢谢!

回复
阅读 2.9k
3 个回答
Tomoe
  • 6.2k
✓ 已被采纳

簡單來說:當父元素設置 overflow: hidden 時,父元素會形成一個 BFC ,會需要計算父元素高度,而這時根據 CSS 中的 BFC 規則,浮動元素(float) 也會被計算在內,所以才會造成浮動元素也被包含在內的效果。

position: absolute 則不會被計算在內。

安歌
  • 6.9k

因为overflow:hidden会触发BFC, 至于BFC是什么, 一下说不清楚, 还是google一下, 比较清楚...

宣传栏