伪元素清除浮动必须同时满足三个条件：content: ""（非none）使::after节点存在，display: table（非block/inline-block）触发bfc并参与布局，clear: both（作用于块级伪元素）使其落到浮动下方；缺一不可。

content: "" 是伪元素渲染的硬门槛，不是可选配置

浏览器根本不会生成 ::after 节点，除非你显式写了 content 且值非 none。漏掉这行，display: table 和 clear: both 全部失效——不是“没效果”，是压根没这个元素。

常见错误写法包括：

• content: none → 浏览器直接跳过该伪元素
• content:（无引号、无值）→ CSS 解析失败，整条声明被丢弃
• content: " "（空格）→ 可能引入不可见字符，干扰行高或边框对齐
• 用预处理器（如 Sass）时，某些压缩配置会自动删掉 content: "" → 编译后就没了

为什么不能用 display: block 替代 display: table？

display: block 确实能让 clear: both 生效，但它不自动创建 BFC，在 IE8/9 或老版 Safari 中容易因外边距合并（margin collapse）导致撑高失败；而 display: table 天然触发匿名 BFC，不继承 line-height，也不受空白符影响，兼容性更稳。

特别注意：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• display: inline-block 绝对不用——它会引入基线对齐问题，且在部分上下文中无法正确参与清除计算
• 父容器若已设 overflow: hidden 或 display: flow-root，再加 ::after 属于冗余，甚至可能引发裁剪或定位异常

clear: both 必须作用于块级伪元素，否则无效

clear: both 对行内元素不起作用。而 ::after 默认是 inline 级别，即使写了 clear: both，浏览器也会忽略它。所以必须配一个能参与块级布局的 display 值。

验证是否生效的方法很直接：

• 打开 DevTools → Elements 面板 → 找到目标父容器 → 展开看末尾有没有 ::after 节点
• 没出现 = content 缺失或被删了
• 出现了但没撑高 = display 值不对，或父容器自身有 position: absolute / overflow 干扰

加在哪个父容器上才有效？

必须加在「直接包裹浮动子项」的父元素上。比如 HTML 是 <div class="wrapper"><div class="row"><div style="float:left"></div></div></div>，那 .clearfix 要加在 .row 上，不是 .wrapper。

其他高频错位场景：

• 父容器本身是 position: absolute 或 fixed → clear 对脱离文档流的容器无效
• 全局样式里写了 *::after { display: none } → 直接干掉所有伪元素
• 父容器用了 display: flex 或 grid → 浮动本就不该在这种上下文中使用，clear 已无意义

真正容易被忽略的点是：这不是一个“写了就能用”的样式组合，而是三个条件共同构成的渲染契约——content: "" 让节点存在，display: table 让它参与布局，clear: both 让它落到浮动下方。少一个，整个链条就断了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！