BFC能清除浮动是因为它使父容器形成独立渲染区域，将浮动元素包含在内从而撑开高度；触发条件包括float不为none、position为absolute/fixed、display为inline-block/table-cell等、overflow不为visible。
浮动元素会脱离文档流，导致父容器高度塌陷；而BFC（块级格式化上下文）是一个独立的渲染区域，内部的布局不会影响外部，同时也能包含浮动元素——这正是用BFC
清除浮动
的核心原理。
浮动为什么会导致父容器高度塌陷
浮动元素不再参与普通文档流的高度计算，父容器在计算自身高度时“看不见”浮动子元素，因此高度收缩为0（或仅包含非浮动内容的高度）。
常见表现：
- 父容器背景色、边框不显示
- 后续兄弟元素上移，覆盖浮动区域
哪些CSS属性能触发BFC
只要一个元素满足以下任一条件，就会形成BFC：
float
值不为
none
（如
、
）
position
值为
absolute
或
fixed
display
值为
inline-block
、
table-cell
、
table-caption
、
flex
、
grid
、
flow-root
overflow
值不为
visible
（如
、
、
）
BFC如何清除浮动
当父容器触发BFC后，它会把内部浮动元素“包裹”进来，重新计算自身高度，从而撑开容器、防止塌陷。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
典型写法示例：
说明：
-
是最常用、简洁的BFC清除方式
-
是现代推荐写法（语义清晰、无副作用）
-
伪元素
+
是传统清除法，不依赖BFC，但需额外代码
BFC清除浮动 vs 传统清除法的区别
传统清除（如
）作用于「紧邻浮动元素之后的元素」，靠插入一个“挡板”来中断浮动影响；
BFC则是让「父容器自己变成一个隔离盒子」，从根源上包含浮动，更彻底且无需额外标签或伪元素（用
时）。
关键区别在于作用对象不同：一个是子元素干预，一个是父容器自洽。
leftrighthiddenautoscroll.container {
overflow: hidden; /* 触发BFC，同时隐藏溢出（若不需要可改用 auto） */
}
.container::after {
content: "";
display: table;
clear: both;
}overflow: hiddendisplay: flow-rootclear: bothclear: bothflow-root