BFC是块级格式化上下文，为独立渲染区域；它能解决浮动塌陷，因触发BFC的父容器会将内部浮动元素纳入高度计算，从而自然撑开。
什么是BFC以及它为什么能解决浮动塌陷
BFC（Block Formatting Context）是CSS中一个独立的渲染区域，内部元素的布局不会影响外部，同时也能“包裹住”内部浮动元素，避免父容器高度塌陷。关键在于：float 元素会脱离普通文档流，导致父容器无法感知其高度；而触发BFC的容器会重新计算包含浮动子元素的高度，从而自然撑开。
不是所有BFC触发方式都适合修复塌陷——比如 position: absolute 会让父容器脱离文档流，反而破坏布局结构，所以得选对方法。
最稳妥的4种BFC触发方式及适用场景
以下方式都能创建BFC，但实际项目中要兼顾兼容性、语义性和副作用：
-
overflow: hidden：简单直接，IE6+ 支持，但会意外裁剪溢出内容（比如下拉菜单、阴影、定位偏移元素） -
display: flow-root：现代首选，专为此类问题设计，无副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 支持，但不兼容 IE 和旧版 Safari -
display: table-cell或display: table：兼容性好，但会改变盒模型行为（比如内边距表现异常、垂直对齐逻辑介入），仅建议临时调试用 -
float: left或right：虽能触发BFC，但会让自身也脱离文档流，父容器仍可能塌陷或错位，**不推荐用于解决塌陷**
为什么clear: both不是BFC方案
clear: both 是清除浮动，不是创建BFC。它只是让某个元素避开前面的浮动块，对父容器高度计算毫无帮助。常见错误是给父容器加 clear，这根本无效——clear 只作用于兄弟元素，不能影响父级高度。
立即学习“前端免费学习笔记（深入）”；
典型误写：
.parent { clear: both; } /* ❌ 完全没用 */正确做法是让 .parent 自身成为BFC容器，而不是指望它“清除”自己内部的东西。
真实项目中的取舍建议
如果你的项目需支持 Safari 14 或更低版本，display: flow-root 不可用，此时优先用 overflow: hidden 并检查是否有溢出内容；若已放弃 IE 和旧 Safari，flow-root 应作为默认选择——它语义清晰、无副作用、开发者意图明确。另外，别忘了：如果子元素用了 margin-bottom，而父容器是BFC，那这个 margin 不会和外部元素合并，这有时是预期行为，有时却是隐藏bug的源头。
