极客观点
项目管理
HarmonyOS
为元素设置“float”样式之后，元素会脱离标准文档流，不再占据原来的空间。后续元素会向前移动，占据这个新的空间。后续的文本会围绕着浮动元素分布，形成一种环绕布局的现象。
<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<meta charset="utf-8">
<style type="text/css">
#ele-1 {
width: 100px;
height: 50px;
background-color: #3E3;
float: left;
}
#ele-2 {
width: 500px;
background-color: #EE3;
}
</style>
</head>
<body>
<div id="ele-1">Div area!</div>
<p id="ele-2">
This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!This is a paragrapha!
</p>
</body>
</html>显示效果如下：
给P元素添加样式“overflow:hidden”之后，显示效果如下：
请问这个是什么原理啊？
这个问题牵扯到BFC（块级格式化上下文）。楼上的说法没有说到这个根本。
1、触发BFC的条件：
所以overflow:hidden;是会触发BFC的。
再来看看，触发BFC的结果：
2、布局规则（BFC的性质）
简单来说BFC就是自己内部无论怎么布局都不会影响外面的其他元素。
这样一来答案就清晰了，overflow:hidden触发了BFC，导致自己内部浮动元素高度参与计算，从而避免了高度塌陷。（BFC与清除浮动密不可分的关系）
引申：
IE的类似概念是layout。
3、hasLayout触发条件
另外：BFC与清除浮动有密不可分的联系，与本题不符请自行参考学习。了解BFC布局机制能够解决和避免很多自己觉得“奇怪”的问题。