clear: both 并非清除浮动而是避开浮动区域；解决父容器塌陷需触发bfc或插入清除节点，错误地给浮动元素自身加clear会破坏布局，正确做法是用伪元素+display: table或现代flex/grid替代float。
直接用 clear: both 并不能“清除浮动”，它只是让某个元素避开前面的浮动区域；真正要解决父容器塌陷，得让父容器重新包含浮动子元素——核心是触发 BFC 或插入清除节点。
为什么 clear: both 加在浮动元素上没用
常见错误是给浮动子元素自己加 clear: both，比如：float: left; clear: both。这会让它强制换行并脱离浮动流，反而破坏布局。clear 只对**块级元素自身生效**，且必须放在浮动元素**之后**、作为独立块存在。
- 错误写法：
.item { float: left; clear: both; }→ 每个 item 都独占一行 - 正确场景：导航栏末尾加一个
<div style="clear: both"></div>，让它从新行开始 -
clear: left和clear: right仅避开单侧浮动，适合混合浮动布局（如左图右文）
overflow: hidden 看似简单，但容易裁掉内容
给父容器设 overflow: hidden 是最快触发 BFC 的方式，能让父容器“看见”浮动子元素高度，但它会**硬性裁剪溢出内容**——下拉菜单、tooltip、绝对定位弹层一旦超出容器边界就消失。
- 适用场景：确定子元素完全在容器内，且不需要溢出（如纯卡片列表）
- 替代方案：
overflow: auto会加滚动条，体验更差；display: flow-root是 HTML5 新增属性，无裁剪副作用，兼容性到 Chrome 64+/Firefox 61+，推荐新项目优先用 - IE 不支持
flow-root，老项目仍需 fallback 到clearfix
伪元素 ::after 清除法必须配 display: table
只写 .clearfix::after { content: ""; clear: both; } 是无效的——clear 对非块级元素不起作用。标准写法中 display: table（或 block）才是关键，它让伪元素成为块级盒，才能承载 clear 行为。
- 最小有效写法：
.clearfix::after { content: ""; display: table; clear: both; } - 不加
display：伪元素默认是 inline，clear失效 - 加
height: 0; visibility: hidden;可进一步避免意外撑高容器（尤其当父元素有 padding 或 border 时） - IE8 需补
*zoom: 1触发 hasLayout，但 2026 年多数项目已可省略
现代项目该直接换掉 float，而不是清除它
清除浮动本质是在修一个本不该存在的问题。如果你正在写新模块，或者重构老代码，优先把 float 换成 display: flex 或 display: grid ——它们天然不脱标，父容器自动撑高，根本不需要清除逻辑。
- 单行多列：
.container { display: flex; }+ 移除所有子元素的float - 响应式栅格：
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))); } - 图文混排等少数场景仍可用
float（如文章内图片），但整页布局别再用
最容易被忽略的是：很多团队还在机械套用 clearfix 类，却没意识到——只要父容器用了 float、position: absolute 或 display: inline-block，同样会塌陷。问题从来不在“怎么清”，而在“为什么非得用浮动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
