浮动导致父容器高度塌陷是因浮动元素脱离文档流；clearfix通过伪元素触发BFC并清除浮动；overflow:hidden也触发BFC但会裁剪溢出内容；现代推荐display:flow-root，语义清晰且无副作用。
浮动元素导致父容器高度塌陷的典型表现
当子元素使用
或
后，父容器常常“看不见”它们的高度，表现为高度为 0 或仅包裹内联内容。这不是 bug，而是浮动的原始设计行为：浮动元素脱离普通文档流，父容器自然无法感知其尺寸。
clearfix 是什么，以及为什么它能生效
clearfix 是一种通过伪元素在父容器末尾插入并清除浮动的 CSS 技巧。它的核心是触发父容器的 BFC（块级格式化上下文），同时让伪元素承担清除职责。
常见写法如下：
关键点：
立即学习
“
前端免费学习笔记（深入）
”；
必须存在，否则伪元素不渲染
（或
）确保伪元素参与布局
强制该伪元素下移至所有浮动元素下方
只对已应用
的子元素有效；若子元素用
或
，无需 clearfix
overflow
: hidden 为什么也能撑开父容器
（或
、
）会强制触发父容器的 BFC，而 BFC 容器会包含其内部的浮动子元素，从而恢复正确高度。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
但要注意：
会裁剪溢出内容，比如下拉菜单、tooltip、绝对定位偏移过大的元素可能被截断
在不需要滚动时也可能出现空白滚动条（尤其 Safari）
它不解决“清除浮动”的语义问题，只是副作用生效，可读性不如 clearfix
现代替代方案和容易忽略的细节
现在更推荐用
替代两者，它是专为创建无副作用 BFC 而生的值：
优势明显：
语义清晰，明确表示“我要包含浮动子元素”
不干扰溢出行为，不会裁剪内容，也不触发滚动条
兼容性已覆盖 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+
老项目中如果必须支持 IE，才需回退到 clearfix；用
的话，务必检查所有可能溢出的交互组件是否被意外隐藏。
float: leftfloat: right.clearfix::after {
content: "";
display: table;
clear: both;
}content: ""display: tableblockclear: bothfloatflexgridoverflow: hiddenautoscrolloverflow: hiddenoverflow: autodisplay: flow-root.container {
display: flow-root;
}overflow