clearfix必须用::after而非::before，因其作为最后“视觉子节点”设clear: both才能截断浮动流；content: ""不可省略，否则伪元素不渲染；height: 0和visibility: hidden缺一不可，分别控制空间占用与可见性交互；flow-root可替代但兼容性有限，旧版Safari及全部IE不支持。
clearfix为什么必须用
而不是
因为
插入在内容最前面，无法影响父容器对后续浮动子元素的高度计算；而
作为最后一个“视觉子节点”，在其上设置
才能真正把浮动流“截住”，让父容器重新包裹全部浮动子项。如果误用
，
伪元素
会出现在浮动元素上方，起不到撑开高度的作用。
属性为什么不能省略
（和
）是CSS生成的内容，属于“无内容则无渲染”的类型——即使写了
、
，只要
值为
或完全缺失，该伪元素就不会被创建，整个
逻辑就失效。
必须写成
（空字符串），不是
（空格）或
部分旧版IE（如IE6/7）要求
配合
触发hasLayout，但现代项目可忽略
写
（不换行空格）也能生效，但没必要，
最简洁明确
和
能不能只留一个
不能。两者缺一不可，作用不同：
防止伪元素占据垂直空间，避免意外撑高容器
确保伪元素不可见且不响应交互（
仍会捕获鼠标事件）
只设
但没隐藏，伪元素虽不可见却仍可能在某些浏览器中触发重排抖动
只设
但没清空高度，它仍会以默认
撑开一行空白
常见错误写法：
——漏掉
和
，在复杂嵌套或缩放场景下容易引发布局偏移。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
现代替代方案是否真能取代
确实能触发BFC并自然包含浮动子元素，写法更简洁：
。但它有兼容性断层：
Chrome 58+/Firefox 53+/Safari 15.4+ 支持，但Safari 15.3及更早版本不支持
所有IE版本（包括IE11）完全不识别
若项目需支持iOS Safari clearfix仍是唯一稳妥选择
真正容易被忽略的点：很多人以为加了
就一劳永逸，但若父容器本身设置了
或
，或者子元素用了
脱离文档流，
照样失效——它只解决纯
导致的高度塌陷，不是万能布局修复器。
::after::before::before::afterclear: both::beforecontent::after::beforedisplay: blockclear: bothcontentnoneclearfixcontent: ""content: " "content: nullcontent: "."*zoom: 1content: "\00a0"""visibility: hiddenheight: 0height: 0visibility: hiddenopacity: 0height: 0visibility: hiddenline-height.clearfix::after { content: ""; clear: both; display: block; }height: 0visibility: hiddenclearfixdisplay: flow-root.container { display: flow-root; }flow-rootclearfixheightmax-heighttransformclearfixfloat