clear: both 不能解决浮动塌陷，因为它只使当前元素避开浮动元素，不改变父容器对浮动子元素的“不可见”状态；真正有效的是触发BFC（如display: flow-root）再配合clear。
clear: both 为什么不能直接解决浮动塌陷
很多人以为给浮动元素后面加一个 clear: both 的空 div 就能“清除浮动”，结果发现父容器还是高度塌陷、后续内容被挤偏。根本原因在于：clear: both 只是让**当前元素避开上方左右两侧的浮动元素**，它不改变父容器对子浮动元素的“不可见”状态——父容器依然无法感知浮动子元素的高度。
真正起作用的是“BFC 触发 + clear 配合”
要让父容器包裹住浮动子元素，必须先让它形成 BFC（块级格式化上下文）。常见可靠方式包括：
-
overflow: hidden（或auto、scroll）——最常用，但注意会裁剪溢出内容 -
display: flow-root——现代标准方案，无副作用，兼容性到 Chrome 64+/Firefox 58+，推荐新项目使用 -
float: left或position: absolute——会改变自身定位行为，慎用
此时再在内部末尾加一个带 clear: both 的元素（比如 ），才能既撑开父容器，又防止后续内容被浮动干扰。
为什么 display: flow-root 比 overflow: hidden 更干净
overflow: hidden 虽然能触发 BFC，但一旦子元素有 position: absolute 或动画移出边界，就会被意外裁剪；而 display: flow-root 仅改变格式化上下文，不影响溢出表现。实际对比：
立即学习“前端免费学习笔记（深入）”；
.parent { display: flow-root; }
.parent::after {
content: "";
display: table;
clear: both;
}
这段代码比老式“clearfix hack”更简洁，也比 overflow 更安全。如果需要兼容 IE，才退回到 :after 伪元素 + zoom: 1 方案。
clear: both 对兄弟元素的影响容易被忽略
clear: both 不只影响自身位置，还会强制它和前面所有浮动元素垂直分离。这意味着：
- 如果前面有多个浮动块，
clear: both会让当前元素下移到**所有浮动块的底部对齐线之下**，不是第一个浮动块结束处 - 在 Flex 或 Grid 容器里写
clear: both完全无效——这些布局模式下浮动本身已被忽略 - 用在
inline元素上无效，clear只对块级盒生效
所以别指望靠它微调间距，它本质是“避让机制”，不是“占位工具”。真要控制间隙，该用 margin 或布局容器自身的属性。
