::after清除浮动是通过在父容器末尾插入隐形块级伪元素并设置clear: both，使其下压至浮动元素底部从而撑开父容器高度；它不污染HTML、语义干净、不影响DOM与可访问性，content: ""和display: block（或table）是关键前提。

因为浮动元素会脱离文档流，父容器“看不见”它们的高度，导致自身塌陷——::after 本质是往父容器末尾悄悄塞一个“隐形块”，靠 clear: both 把它压到所有浮动元素下方，从而把父容器高度“撑起来”。

为什么必须用 ::after 而不是随便加个 div？

它不污染 HTML 结构：不用在页面里硬写一个空标签，纯靠 CSS 动态生成；语义干净、维护成本低。伪元素只存在于渲染树中，不影响 DOM 和可访问性。

• content: "" 是关键——没有内容，伪元素就不会被创建
• display: block（或 table）是前提——只有块级元素才能响应 clear 属性
• clear: both 是动作——让该元素下边缘避开左右所有浮动，自然落到浮动区底部

::after 清除浮动的真实工作过程

浏览器渲染时，对设置了 .clearfix::after 的容器，会在其内容流的最后插入一个匿名块盒。这个盒子虽然没内容、不可见，但它参与布局计算：

• 它的存在让父容器有了“最后一个子元素”
• 这个子元素被 clear 推到浮动元素最底端，强制父容器延伸至此
• 于是父容器终于能正确包裹全部浮动子项，高度不再为 0

为什么 display: table 更稳妥？

早期用 display: block 有时在某些场景下（比如内联上下文）表现不稳定；而 display: table 会隐式创建 BFC，既能清除浮动，又能避免外边距合并等副作用，还兼容老浏览器。

• table 类型的 display 值天然具有“自适应高度”和“隔离布局”的特性
• 配合 height: 0 和 visibility: hidden，确保它完全不占视觉空间
• 现代写法常组合使用：display: table; clear: both; content: ""

和现代方案（如 flow-root）比有什么不同？

::after 是“打补丁式修复”，核心目标是解决塌陷；而 display: flow-root 是直接让父容器成为新的 BFC 根，从机制上阻止浮动逃逸。前者兼容性极广（IE8+），后者更简洁但 IE 不支持。

• 需要支持 IE6/7？得加 *zoom: 1 触发 hasLayout
• 只面向现代浏览器？flow-root 一行代码就能替代整个 clearfix
• 项目中混用浮动与 Flex/Grid？优先考虑重构，而非强依赖清除技巧