BFC 是 CSS 布局的「隔离舱」。元素进入 BFC 后：内部浮动会被计算高度（清浮动原理）；子元素的 margin 不会与外部合并；BFC 区域不会与浮动元素重叠（两栏自适应布局原理）。
触发方式：overflow 非 visible（最常用 hidden/auto）、float 非 none、position 为 absolute/fixed、display 为 flex/grid/inline-block、根元素 html。现代布局里 flex/grid 天然是 BFC，所以手动清浮动的场景已大大减少。
<style> .parent { border: 2px dashed #e78a3e; } .child { float: left; width: 100px; height: 60px; background: #4a9eff; color:#fff; } .clear-bfc { overflow: hidden; } /* 触发 BFC，父盒子被撑高 */ </style> <p>父元素高度塌陷（包不住浮动子元素）：</p> <div class="parent"><div class="child">浮动子</div></div> <p>触发 BFC 后高度恢复：</p> <div class="parent clear-bfc"><div class="child">浮动子</div></div>