bfc会强制包含浮动子元素高度并阻断跨bfc外边距合并；触发后父容器将浮动元素纳入高度计算，常用方式有overflow:hidden、display:flow-root（推荐）等，其中flow-root语义清晰无副作用。
BFC 会强制包含浮动子元素的高度，并阻断常规流中盒模型的外边距合并行为——这是它影响浮动与盒模型计算最直接、最关键的两点。
触发 BFC 后父容器如何计算高度
常规流中，浮动元素脱离文档流，height 不参与父容器高度计算，导致“高度塌陷”；一旦父容器触发 BFC（如设置 overflow: hidden），它就会把内部所有浮动子元素纳入自身高度计算范围。
- 常见触发方式：
overflow: hidden、overflow: auto、display: flow-root（推荐）、float: left、position: absolute -
display: flow-root是语义最干净的选择，不带副作用（比如overflow: hidden可能意外裁剪内容，float会让父容器也脱离文档流） - IE 兼容需谨慎：
zoom: 1或height: 1%能触发 hasLayout，但属于 hack，现代项目应避免
BFC 如何改变 margin 的行为
在同一个 BFC 内，相邻块级盒子的上下 margin 仍会合并；但 BFC 边界本身会阻断“跨 BFC”的 margin 合并——即父级和第一个子元素的 margin-top 不再传递，两个相邻但分属不同 BFC 的盒子也不会合并外边距。
- 典型场景：一个
div包裹h2，若父div没有 BFC，h2的margin-top会“透出”到父级甚至更上层（margin 传递） - 加
overflow: hidden后，父div成为独立 BFC，h2的margin-top就被截断在内部，不再影响外部布局 - 注意：BFC 并不消除“内部合并”，只是划清边界——想彻底禁用 margin 合并，得靠 padding 或 border 隔开，或改用 flex/grid 布局
BFC 与浮动元素的排版关系
BFC 容器不会与外部浮动元素重叠，其左/右边缘会紧贴包含块边界（而非浮动元素边缘），且文字内容会自然绕流——这使得 BFC 成为实现“自适应两栏布局”的底层机制之一。
- 例如：
float: left; width: 200px;的侧边栏 + 一个overflow: hidden的主内容区，主区会自动避开浮动区域，在剩余宽度内渲染 - 但若主区宽度不足（比如设了
width: 100px），它不会强行挤进浮动区右侧，而是换行到浮动区下方——这是 BFC “不重叠”规则的体现 - 现代开发中，
display: flex或display: grid更可控，但理解 BFC 仍是调试旧代码或兼容性问题的关键
真正容易被忽略的是：BFC 不是“清除浮动”的动作，而是一种渲染隔离状态；很多看似“清浮动”的写法（比如 overflow: hidden）本质是借用了 BFC 的高度包含特性。一旦你混淆了“目的”和“原理”，遇到 overflow 裁剪内容、flex item 不触发 BFC 等边界情况，就容易卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
