清除浮动本质是让父容器感知高度或阻止后续元素被干扰，应通过触发BFC（如display: flow-root）或正确使用clear: both（作用于浮动后的兄弟块级元素），而非误用在浮动元素自身。
清除浮动影响不是“删掉 float”，而是让父容器重新感知浮动子元素的高度，或阻止后续元素被浮动干扰。最直接有效的做法是触发 BFC（块级格式化上下文）或插入清除节点——但选哪种，得看你的场景和兼容性要求。
为什么 clear: both 加在浮动元素自己身上没用
clear: both 不是作用于“浮动状态”，而是控制**当前元素自身的外边距行为**：它让该元素避开前面所有浮动元素占据的区域。所以它必须用在浮动元素之后的**兄弟块级元素**上，且这个元素不能是浮动的、也不能是 inline 元素。
- 错误写法：
<div style="float: left; clear: both"></div>—— 它自己浮着，又想“避开自己”，逻辑矛盾，也不撑父容器 - 错误位置：
<div style="clear: both"><div style="float: left"></div></div>——clear对子元素无效 - 正确用法：
<div style="float: left"></div><div style="clear: both"></div>，且后者需是块级、非浮动、紧跟其后的兄弟节点 - 额外建议：加
height: 0; font-size: 0; overflow: hidden;防止空<div>因默认行高或 margin 产生意外高度
clearfix 伪元素方案怎么写才真正生效
现代项目首选伪元素法，但它不是写个 content: "" 就完事。关键在于伪元素必须参与布局，并触发清除行为。
- 必须设
display: table或display: block；display: table更稳妥，天然创建 BFC，且不继承 line-height - 必须设
clear: both，且只能放在::after（::before可选但仅用于防止 margin-top 折叠） - 别漏
content: ""—— 没内容的伪元素默认不渲染，clear失效 - IE8 支持单冒号写法：
.clearfix:after；如需兼容 IE6/7，补*zoom: 1 - 示例（安全写法）：
.clearfix::after {<br> content: "";<br> display: table;<br> clear: both;<br>}
用 overflow: hidden 快速修复，但风险在哪
给父容器设 overflow: hidden 确实能“看起来”撑开高度，原理是触发 BFC。但它不是清除浮动，而是绕过问题——副作用很实在。
立即学习“前端免费学习笔记（深入）”；
- 下拉菜单、tooltip、弹窗等溢出内容会被裁剪，尤其当它们用
position: absolute相对父容器定位时 - 如果父容器本身有
position: relative且需要 z-index 层级控制，overflow: hidden可能截断层级关系 -
overflow: auto会多出滚动条（哪怕内容没溢出），overflow: scroll强制显示滚动条，都不干净 - 更优替代：
display: flow-root—— 专为此设计，触发 BFC 且无裁剪副作用，但需查 caniuse 确认目标环境支持度
什么时候该放弃清除浮动，直接换布局方案
如果你正在写新模块，还手动写 float + clearfix，大概率是在重复解决一个本不该存在的问题。
- 单行多列、导航栏、卡片列表 → 改用
display: flex，父容器自动包裹，子项默认不脱离文档流 - 网格状结构（如相册、仪表盘）→ 用
display: grid，二维控制，响应式天然友好 - 图文环绕（唯一合理使用场景）→ 保留
float: left/right，但此时父容器高度塌陷本就不该发生（文字环绕不需要父容器撑高） - 老项目维护不可避免？那就只在必要处加
clearfix，别把它当成“标准流程”往每个容器上套
真正容易被忽略的，是把“清除浮动”当作一种技术动作来练，却没意识到：它本质上是个红灯，提示你正在用图文环绕工具干布局的活。
