clear: both写在浮动元素后仅影响自身位置，不能解决父容器塌陷；真正有效的是让父容器触发bfc，推荐用display: flow-root，或确保clearfix中content: ""、display: table、clear: both三者齐全。
clear: both 写在浮动元素后面 ≠ 清除父容器塌陷
很多人以为给最后一个浮动子元素加 clear: both 就能“清浮”，其实它只影响自身位置：让这个元素下移到前面所有浮动元素下方，但父容器依然看不见浮动子项，高度照塌。这是 CSS2.1 的原始规则——clear 只对兄弟元素生效，对祖先无效。你看到的“好像清掉了”，往往是因为那个带 clear 的元素本身有高度，意外撑开了父容器，属于巧合，不是机制。
所谓“CSS3 clearfix”其实是伪元素 + CSS2.1 属性的组合技
根本不存在一个叫 “CSS3 clearfix” 的新标准。所谓的“CSS3 clearfix”只是用 ::after（CSS3 引入的双冒号语法）插入一个伪元素，再复用 CSS2.1 就支持的 content、display、clear 这几个属性来实现清除效果。关键点在于：
-
content: ""必须写且带引号，否则伪元素不渲染，整个逻辑失效 -
display: table比display: block更稳妥：它既触发 BFC，又避免某些浏览器中height: 0导致清除失败 -
::before和::after通常一起声明，::before主要防顶部外边距合并（margin collapse），不是为了“清浮”本身 - IE6–7 需要
*zoom: 1触发 hasLayout，但这属于历史补丁，现代项目可直接省略
display: flow-root 是真·CSS3 原生解法，但和 clearfix 不是同一维度
display: flow-root 是 CSS Display Module Level 3 正式引入的属性，目的就是为容器创建一个独立的块级格式化上下文（BFC），天然包裹浮动子项。它和 clearfix 的区别不是“新旧”，而是“机制不同”：
- clearfix 是“模拟一个清浮元素”，靠伪元素 +
clear打断浮动流 -
display: flow-root是“让容器自己变成一个封闭盒子”，浮动子项自动被包含，无需任何 hack - 它不依赖
content或clear，所以不会因伪元素未渲染而失效；也不会因父容器已有overflow: hidden而冲突 - 兼容性断层明显：Safari 15.3 及更早会出渲染异常，IE 完全不识别，静默退化为
display: block，导致塌陷重现
真正容易被忽略的是：清除浮动的本质不是“清”，而是“重建容器感知能力”
无论用哪种方法，核心目标都是让父容器重新“看见”浮动子元素的高度。但不同方案的失效表现差异极大：clearfix 失效时父容器直接塌陷，问题立刻暴露；overflow: hidden 失效时内容被裁剪却无报错；display: flow-root 在 Safari 15.3 下可能只在特定字体缩放或嵌套 flex 场景中悄悄错位。选哪个，不能只看“能不能用”，要看“错的时候，你能不能一眼定位”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
