<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div style="background:red;height:100px;width:100px;float:left;"></div>
<div style="background:blue;">
<div style="clear:both;">
test
</div>
</div>
</div>
</body>
</html>你认为test div会在什么地方？左边？
实际上test div在red div的下面，并且还顺带拉伸了blue div的高度
为什么？
都知道，当一个元素设置了 float 属性（如 float: left 或 float: right）后，它会脱离正常的文档流，并且可以左右浮动。这种情况下，其它的块级元素会忽略浮动元素的存在，并尝试占据它的空间（注意：是同一个BFC的所有元素，也包括相邻元素的所有子元素）
BFC（块级格式化上下文，Block Formatting Context）
而clear:both的作用是使其元素清除两侧的浮动，不会使其覆盖浮动的元素
那么渲染时，blue div要占据red div的空间，而test div由于设置了clear:both，就会在渲染时忽略red div的浮动跑到下方，而又因为red div跑到下方了，blue div的高度也会被拉高，这就是形成这个反直觉结果的过程。
怎么解决？
1.非必要不乱用float
2.使用overflow:auto，加到blue div上就是直觉的效果
当一个父元素设置了
overflow: auto;（或者overflow: hidden;）时，这个父元素会创建一个新的块级格式化上下文（BFC，Block Formatting Context）。新的BFC会影响内部元素的布局，包括浮动的行为。
这也是为什么我的左侧菜单能让右侧内容区域的antD生成的table跑到下方的原因，css bug真难找 /(ㄒoㄒ)/~~
1075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
