clear: both 的空 div 无法撑开父容器高度，因其无内容、未触发 BFC；overflow: hidden 可触发 BFC 但会裁剪溢出；伪元素 clearfix 更稳妥；Flex/Grid 布局下浮动失效，无需清浮动。
为什么
不能撑开父容器高度
很多人试过在浮动元素后面加一个空
，发现父容器还是塌陷——因为这个
虽然清除了浮动，但它本身是空的、没有内容或高度，且未参与父容器的 BFC（块级格式化上下文）构建，所以父容器依然“看不见”内部浮动元素的高度。
用
触发 BFC 最快但有风险
给父容器设置
（或
、
）能立即让容器包含浮动子元素，原理是它强制创建了新的 BFC，使浮动元素被纳入高度计算。但要注意：
会裁剪溢出内容（比如下拉菜单、阴影、绝对定位超出部分）
在某些浏览器可能意外出现滚动条（哪怕内容没溢出）
移动端 Safari 对
的 touch 行为有时不一致
伪元素 +
更稳妥
现代推荐做法是用伪元素模拟
清除浮动
的“占位”，既不污染 HTML，又无溢出裁剪问题。标准
写法如下：
关键点：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
（或
）确保伪元素参与文档流并撑高容器
不能只写
，否则伪元素默认是
，
不生效
IE8+ 兼容没问题；若需支持 IE7，可加
触发 hasLayout
Flex 或 Grid 布局下根本不用清浮动
如果父容器已设为
或
，子元素即使设了
也**不会脱离文档流**，更不会导致父容器塌陷——此时浮动实际失效，高度自然正常。但这也意味着：你本就不该在 Flex/Grid 容器里用
做布局，那是反模式。
真正需要清浮动的场景，基本只存在于传统文档流布局中；一旦用了现代布局，就该把
当作纯装饰手段（比如文字环绕），而非结构控制工具。
clear: bothdivoverflow: hiddenoverflow: hiddenautoscrolloverflow: hiddenoverflow: autooverflow: scroll::afterclearfixclearfix.clearfix::after {
content: "";
display: table;
clear: both;
}display: tableblockclear: bothinlineclear*zoom: 1display: flexdisplay: gridfloatfloatfloat