清除浮动是让父容器重新感知浮动子元素高度，需触发BFC或插入清除节点；clear: both必须加在浮动元素后的同级块级元素上，伪元素法需content+display:table+clear:both，现代推荐display:flow-root。
清除浮动不是“删掉 float”，而是让父容器重新感知浮动子元素的高度。最直接有效的做法是触发 BFC 或插入清除节点，而不是在浮动元素自己身上写 clear: both——那根本不起作用。
为什么 clear: both 必须加在后续兄弟元素上
因为 clear 只控制自身外边距行为：它让当前元素避开前面的浮动，但不改变父容器高度计算逻辑。如果写在浮动元素自身上，等于让它“避开自己”，毫无意义。
- 正确位置：浮动块之后、同级的下一个块级元素（比如
<div class="clear"></div>） - 必须是块级：
display: block（或table），否则不会换行撑高父容器 - 常见副作用：空标签默认有
margin和line-height，建议显式设height: 0; font-size: 0; overflow: hidden;
::after 伪元素法怎么写才真正生效
伪元素不是装饰，它是参与布局的“隐形块”。只写 content: "" 不够，没 display 就不占空间，clear 自然无效。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必备三件套：
content: ""+display: table（比block更稳，天然创建 BFC）+clear: both - IE8 兼容写法用单冒号：
.clearfix:after，而非双冒号 - 别漏掉
.clearfix类要加在父容器上，不是子元素 - 可选增强：加
::before防止顶部 margin 折叠，但仅当父容器有margin-top时才需要
overflow: hidden 看似简单，但容易踩哪些坑
它靠触发 BFC 撑开父容器，但副作用明显——任何溢出内容会被裁剪，且无法滚动查看。
立即学习“前端免费学习笔记（深入）”；
- 若父容器本身有固定
height或max-height，内容超长时直接被截断 -
overflow: auto虽能滚动，但可能意外出现滚动条（哪怕内容没溢出） - 现代替代方案：
display: flow-root——语义精准、无裁剪风险、兼容性查 caniuse（Chrome 64+/Firefox 62+/Safari 15.4+） - 慎用
position: absolute或float触发 BFC：会破坏父容器定位上下文或引发连锁浮动
什么时候该放弃清除，直接换布局方式
清除浮动本质是补救措施。如果你还在为每个列表、每行卡片加 clearfix，说明你正用过时工具解决本不该存在的问题。
- 单行多列：改用
display: flex，父容器自动撑开，子元素移除float - 网格结构：用
display: grid+grid-template-columns，完全绕过浮动机制 - 兼容 IE9 及以下？保留 clearfix，但新模块别再以 float 为布局骨架
- 真正难处理的点常不在清除本身，而在嵌套浮动 + 多层父容器 + 动态内容高度变化——这时 BFC 触发方式要逐层检查，不能只靠一层
overflow
