现代项目不推荐clear: both，因其属打补丁式清理，破坏文档流、难应对嵌套浮动与响应式，且依赖DOM结构；应优先用display: flow-root、flex或grid等现代布局方案。
clear: both 为什么在现代项目里越来越不推荐
它确实能解决问题，但属于“打补丁式清理”，会破坏文档流自然顺序，且无法应对嵌套浮动、响应式断点切换等场景。更关键的是：clear 必须写在浮动元素之后的兄弟元素上，一旦 DOM 结构微调（比如加个 div 包裹），就容易漏掉或错位。
常见错误现象：父容器高度塌陷 依旧存在，或者出现意外的垂直间距；使用 display: flex 或 display: grid 的父容器里混用 clear，反而触发未定义行为。
实操建议：
- 只在遗留代码迁移阶段临时使用，新项目避免主动添加
clear - 若必须用，优先加在最后一个浮动子元素的下一个兄弟标签上，而不是父容器自身
- 不要给浮动元素本身设
clear，那会强制换行，不是清理
::after 伪元素清除浮动的标准写法及兼容性要点
这是目前最主流、最可控的清除方式，核心是让父容器生成一个“看不见但占文档流”的块级子节点，撑开高度。
标准写法长这样：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意三个关键点：
-
content必须非空（哪怕只是""），否则伪元素不渲染 -
display: table比block更稳妥——它天然具有 BFC 特性，且在 IE8+ 全兼容；用block在某些老版 Safari 下可能失效 - 必须同时设
clear: both，单靠display: table不足以触发清除逻辑
别写成 display: table-cell 或 inline-block，它们不会建立新的块格式化上下文（BFC），清理效果不可靠。
为什么不能直接用 overflow: hidden 清除浮动
它确实能让父容器包含浮动子元素，但副作用太强：会裁剪溢出内容、影响 position: absolute 子元素的定位参考、破坏 transform 动画的图层提升逻辑。
典型翻车场景：
- 下拉菜单超出父容器被截断
- 使用
scroll-behavior: smooth时滚动异常 - 配合
will-change: transform做动画，GPU 加速失效
这不是“能不能用”的问题，而是“值不值得为省一行代码承担隐藏风险”。真要偷懒，也请优先选 overflow: auto（仅在必要时才滚动），比 hidden 安全得多。
现代 CSS 中真正该考虑的替代方案
伪元素清理仍是过渡期最稳的选择，但如果你控制得了父容器样式，直接升级布局模型更彻底：
- 父容器设
display: flow-root—— 这是专为解决此问题设计的值，IE 不支持，但 Chrome/Firefox/Edge 79+ 均可用 - 改用
display: flex或display: grid—— 它们天然形成 BFC，无需任何清理；但要注意子元素的float会被忽略，得同步调整子项布局逻辑
别低估 flow-root 的价值：它语义清晰、无副作用、写法极简，只是很多人还没养成习惯去查 MDN 确认兼容性范围。
浮动本身没死，但“靠它做整体布局”已经过时；清理方案的本质，是在旧约束下找最不痛的出口——而出口往往不在清除动作本身，而在是否还非得用浮动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
