伪元素不写content就完全不生效，因为css规范强制要求::before和::after必须声明content（如""）才能创建渲染节点；缺失或值为none时，整个伪元素被跳过，后续所有样式均无效。
为什么伪元素不写content就完全不生效
浏览器根本不会创建这个节点——不是“隐藏了”，是压根没渲染。CSS规范明确要求：::after和::before属于“生成内容”的伪元素，没有content声明（哪怕值是""），整个伪元素就被跳过，后续所有样式（display、clear、height）全部失效。
常见错误包括：
-
content: none→ 显式禁止生成，等同于没写 - 直接删掉
content行 → 预处理器或手误漏掉，DevTools里根本看不到::after节点 -
content: " "（带空格）→ 会插入不可见字符，可能撑高行框、干扰vertical-align或边框对齐
content: ""是唯一既满足“存在性”又无视觉副作用的取值。
content: ""和content: "."有什么实际区别
两者都能让伪元素渲染，但行为不等价：
-
content: "."在旧版IE中曾被用于触发hasLayout（配合*zoom: 1），但现在已无必要 -
content: "."会在DOM树中插入一个真实字符，即使visibility: hidden，仍可能影响line-height计算或font-size继承链 -
content: ""是空字符串，不参与任何文本流计算，不占位、不换行、不触发行高重排，语义上也更准确：只要占位，不要内容
现代项目里用content: "."纯属历史惯性，没有技术优势。
为什么display: table比display: block更稳
关键不在“显示为表格”，而在它隐式创建BFC（块级格式化上下文），这对清除浮动后的高度包裹更可靠：
- 老版Safari（iOS 5–7）对
display: block; clear: both组合处理异常，有时父容器仍塌陷 -
display: table强制生成匿名表格单元，BFC触发更严格，高度计算更一致 -
display: inline-block要避开——它引入空白间隙，且基线对齐可能让父容器高度多出几像素
注意：display: table本身不改变文档流，不影响子元素样式，也没有兼容性风险（IE8+全支持）。
为什么不能把clear: both直接写在父容器上
clear属性只对“同一块级盒内的后续兄弟元素”起作用，而浮动子元素是父容器的后代，不是兄弟。父容器自身写clear: both，浏览器直接忽略——这不是bug，是CSS布局模型的设计逻辑。
真正起效的位置必须是：
- 在父容器内部
- 在所有浮动子元素之后
- 是一个块级、可参与高度计算的节点
::after正是这个位置的精准表达：它作为最后一个“视觉子节点”被插入，clear: both才能真正截断浮动流，把父容器底部“拉下来”。
最容易被忽略的一点：如果父容器本身已有overflow: hidden或transform，它自己已经创建了BFC，此时::after的清除行为可能和BFC叠加，导致高度计算反常——这不是content的问题，而是BFC嵌套干扰。调试时先关掉这些属性，确认::after是否真出现在DOM末尾，再逐步加回。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
