css - overflow: hidden 为什么能够实现这样的效果？
本文介绍了css - overflow: hidden 为什么能够实现这样的效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!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属性在这起到的是什么作用？
不知道我理解的哪里有问题。麻烦各位帮忙看看？谢谢！
解决方案
簡單來說：當父元素設置 overflow: hidden 時，父元素會形成一個 BFC ，會需要計算父元素高度，而這時根據 CSS 中的 BFC 規則，浮動元素(float) 也會被計算在內，所以才會造成浮動元素也被包含在內的效果。
而 position: absolute 則不會被計算在內。
这篇关于css - overflow: hidden 为什么能够实现这样的效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
