浮动导致父容器高度塌陷是因为浮动元素脱离文档流，父容器无法感知其高度；正确清除方式是用clearfix伪元素触发BFC并clear:both；现代布局应优先使用flex或grid。
为什么浮动元素会让父容器高度塌陷
浮动元素脱离普通文档流，父容器无法感知其高度，导致后续元素上移、内容重叠。这不是“bug”，而是 CSS 浮动的原始设计行为——它本就为文字环绕图片这类场景服务，不是用来做布局的。
常见现象：
包着几个
的子项，但父
在开发者工具里显示高度为
，背景色/边框消失，下面的模块直接顶上来。
clear: both 为什么不能只加在最后一个浮动子元素上
加
到最后一个浮动子元素，只能阻止它被前面的浮动影响，但父容器依然不知道“所有浮动已经结束”，高度照样塌陷。
真正要解决的是父容器的包裹能力，不是子元素的位置。所以清除动作必须作用于父容器内部的“末尾位置”，且不能脱离文档流。
立即学习
“
前端免费学习笔记（深入）
”；
错误做法：
（只清自己，不撑父容器）
正确思路：在父容器末尾插入一个「参与文档流但能感知浮动边界」的元素或
伪元素
推荐方案：用 ::after 伪元素触发 BFC 并
清除浮动
这是目前最干净、无额外 HTML、兼容性足够（IE8+）的做法。核心是两件事：创建 BFC（让父容器包含浮动），同时在末尾插入清除行为。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
关键点：
触发 BFC，使父容器重新计算高度
确保该伪元素下移至所有浮动元素下方
必须加
，否则伪元素不渲染
不要用
+
单独写，它不触发 BFC，IE6/7 下可能失效
现代替代方案：flex 或 grid 布局根本绕过浮动
如果只是为了多列并排，
已是过时方案。用
或
不仅自动包含子项、无塌陷问题，还能响应式对齐、等高、顺序控制。
例如替换浮动列表：
注意：若项目需支持 IE9 及以下，仍得回退到
清除；但只要支持 IE10+，
就比浮动 + 清除更可靠、更少意外。
真正容易被忽略的是：清除浮动只是“补救”，而放弃浮动才是根治。很多团队还在封装
工具类，却没意识到它本身就在提醒你——这个布局方式已经该淘汰了。
divfloat: leftdiv0clear: both.clearfix::after {
content: "";
display: table;
clear: both;
}
display: tableclear: bothcontent: ""display: blockclear: bothfloatdisplay: flexdisplay: grid.container {
display: flex;
}
.item {
flex: 1; /* 或设 width */
}
::afterflexclearfix