clear: both 仅作用于后续兄弟元素，无法解决父容器高度塌陷；需通过 ::after 伪元素触发 BFC，且 content 属性不可省略，推荐用 display: table + clear: both 的最小化 clearfix 方案。
为什么直接用 clear: both 不够用
因为 clear: both 只能作用于「后续兄弟元素」，对父容器高度塌陷完全无效。常见现象是：浮动子元素还在，但父容器 height 变成 0，背景、边框全消失，下面的元素直接往上顶——这不是你没写 clear，是你用错了地方。
真正要解决的是父容器的 BFC（块级格式化上下文）缺失问题，而 ::after 伪元素正是低成本触发 BFC 的可靠方式。
clearfix 类里 content: "" 为什么不能省
::after 是生成内容的伪元素，没有 content 属性，它根本不会被渲染，更谈不上清除浮动。很多初学者删掉这行，发现样式完全没效果，就是卡在这儿。
实操建议：
-
content必须存在，值可以是""、" "或"."，但推荐""—— 语义干净，无空格干扰 - 别只写
display: block，还要加clear: both，否则伪元素自己也跟着浮动了 - 必须设置
overflow: hidden或display: table等触发 BFC 的属性，否则某些老浏览器（如 IE7）仍会塌陷
现代 CSS 中要不要还写 clearfix
要看场景。Flex 和 Grid 布局下，浮动本身已退居边缘角色，父容器设 display: flex 或 display: grid 后，子项浮动自动失效，也无需清浮。
但以下情况仍绕不开 clearfix：
- 维护老项目，大量使用
float: left做多栏布局 - 第三方组件库输出的 HTML 结构不可控，只能靠外层加 class 修复
- 需要兼容 IE8–IE11（
display: contents、contain: layout都不支持）
此时推荐用最小化版本：
.clearfix::after {<br> content: "";<br> display: table;<br> clear: both;<br>}
display: table 和 overflow: hidden 选哪个
两者都能让父容器包含浮动子元素，但副作用不同：
-
overflow: hidden会裁剪溢出内容（比如带负 margin 的子元素、下拉菜单、tooltip），且在 iOS Safari 中可能引发滚动卡顿 -
display: table更安全，不触发裁剪，兼容性也好（IE8+），但会让父容器表现得像一个表格单元格——比如默认垂直对齐方式变成baseline，可能影响行内元素排版
所以 clearfix 里统一用 display: table 更稳妥；真遇到对齐问题，再单独加 vertical-align: top 补救。
浮动没消失，只是被“兜住”了。关键不在怎么清，而在清完之后，父容器是否真的按你预期撑开——这点容易被忽略，尤其嵌套多层浮动时，得一层层检查 height 计算逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
