清除浮动本质是触发bfc或插入占位使父容器正确包裹子元素；clear: both 必须加在浮动元素之后的兄弟元素上，因它仅作用于自身外边距；现代推荐 clearfix 伪元素法（display: table + clear: both）或 display: flow-root（兼容性需查caniuse）。
浮动元素不脱离文档流但会破坏父容器高度计算，直接导致父容器塌陷——这不是bug，是CSS规范行为。清除浮动的本质，不是“删掉浮动”，而是触发BFC或插入占位，让父容器能正确包裹子元素。
为什么 clear: both 必须加在浮动元素之后的兄弟元素上
很多人把 clear: both 写在浮动元素自己身上，结果没用。因为 clear 的作用是“避开前面的浮动”，它只对自身盒模型的**外边距生效**，不影响父容器高度计算。
正确做法是：在最后一个浮动子元素后面，插入一个空元素（如 <div class="clear"></div>），并给它设置：
.clear { clear: both; height: 0; overflow: hidden; }
- 必须是浮动元素的**后续兄弟节点**，不能是父元素或浮动元素自身
- 若该元素有内容或默认
height，可能造成额外空白，建议显式设height: 0或font-size: 0 - IE6 需要配合
zoom: 1触发 hasLayout，否则仍可能塌陷
::after 伪元素 + clearfix 是现代项目首选
用伪元素替代空标签，语义干净、无冗余DOM，兼容性覆盖 IE8+。
关键点在于：伪元素必须是 display: table 或 block，且需设置 clear: both：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.clearfix::after {
content: "";
display: table;
clear: both;
}
-
display: table比block更稳妥——它天然创建 BFC，且不会继承父级line-height导致额外高度 - IE8 支持
::after，但不支持双冒号写法，生产环境建议用单冒号:after - 不要只写
content: ""不设display，否则伪元素不参与布局，clear失效
父元素设 overflow: hidden 看似简单，但有隐藏风险
这是最简写法，原理是触发父容器 BFC，使其包含浮动子元素。
但它不是“清除”，是“强制包裹”：
- 任何溢出内容（如绝对定位元素超出父框、下拉菜单、阴影、transform 位移）都会被裁剪
- 移动端 Safari 对
overflow: hidden+position: fixed组合存在滚动异常 - 如果父元素本身需要滚动（如卡片列表容器），这个方案直接不可用
display: flow-root 是未来标准解，但注意兼容性断层
这是 CSS Display Module Level 3 新增的值，专为解决浮动包裹问题设计，语义清晰、副作用为零。
用法极简：
.container { display: flow-root; }
- 完美替代
overflow: hidden，不裁剪、不干扰定位、不触发滚动条 - Chrome 64+/Firefox 59+/Safari 15.4+ 支持；Edge 79+（即 Chromium 内核后）支持
- IE 完全不支持，iOS Safari 15.3 及更早版本也不支持——上线前务必查 caniuse
实际项目中，flow-root 应作为首选，但若需支持 iOS 15.3 或安卓 Webview 旧版，仍得回退到 clearfix 方案。别低估那些还在用微信内置浏览器 8.0.x（对应 X5 内核）的用户。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
