在 CSS 布局中，块级格式化上下文（BFC）是一个独立的渲染区域，内部元素的布局不会影响外部。不少资料提到，设置 overflow 不为 visible 或者设置 float 不为 none 都可以创建 BFC，但很多人在实际写页面时会发现，这两种方式带来的页面表现并不一致。要解释这种差异，需要从 BFC 的触发机制以及属性本身的布局语义说起。
一、BFC 的基本特性与触发条件
BFC 本质上是一块隔离的渲染空间。处于同一个 BFC 中的块级盒子在垂直方向上依次排列，相邻盒子的外边距会发生折叠；而不同 BFC 之间互不干扰。创建 BFC 的常见方式包括：根元素、float 值不为 none、overflow 值不为 visible、display 为 inline-block 或 flex 等、position 为 absolute 或 fixed。
虽然 overflow 和 float 都能让元素变成 BFC 容器，但规范对它们的定义目标完全不同。overflow 用于控制在内容超出盒子时的裁剪或滚动行为，建立 BFC 只是其副作用之一；float 则是为了让元素脱离常规流并实现文字环绕，建立 BFC 同样是为了隔离浮动内部与外部的布局影响。这种出发点差异直接决定了二者在文档流中的角色。
1.1 overflow 创建 BFC 的布局表现
当一个块级元素设置 overflow:hidden（或 auto、scroll）时，它会建立一个 BFC。此时该元素依然按照普通流排列，占据父容器给出的宽度，高度由内容决定（除非显式限定）。它不会向左或向右移动，后面的兄弟元素也不会绕到它旁边。
这种 BFC 最常见的用途是包裹内部的浮动子元素，防止父容器高度塌陷。因为 BFC 会计算内部浮动元素的高度，所以父级设置 overflow:hidden 后能自动撑开。下面的代码展示了利用 overflow 触发 BFC 来清除浮动影响：
<div class="parent" style="overflow:hidden;"> <div class="child" style="float:left;width:100px;height:100px;background:#ccc;"></div> 父容器因 overflow:hidden 建立 BFC，可包含浮动子元素高度 </div>
1.2 float 创建 BFC 的布局表现
当一个元素设置 float:left 或 float:right 时，它同样会创建 BFC，但更重要的是它脱离了普通流。元素会向指定方向浮动，直到碰到包含块的边缘或另一个浮动元素，其宽度默认收缩为内容宽度，而非占满整行。后续普通流中的兄弟元素会围绕该浮动元素排列。
这意味着 float 建立的 BFC 虽然内部布局独立，但元素自身已从正常文档流“漂”出去，对外部结构的占用方式发生了根本改变。下面代码演示了 float 触发 BFC 后，兄弟文本围绕排列的效果：
<div class="box" style="float:left;width:80px;height:80px;background:#ddd;">浮动块</div> <p>这是一段普通文本，它会围绕上方的浮动块排列，因为浮动元素已脱离常规流并建立 BFC。</p>
二、行为差异的核心原因
二者行为不同的根本点在于“是否脱离文档流”。overflow 触发 BFC 时，元素仍然是一个普通流块级盒子，只是内部渲染规则变化；float 触发 BFC 时，元素执行了浮动定位，脱离了普通流。因此 overflow 方案不会改变元素对外占位的方式，而 float 方案会让元素“飘”起来并影响周边内容排布。
另一个差异是宽度计算。overflow 容器宽度依旧遵循块级元素撑满父容器的规则；float 元素宽度则变为 shrink-to-fit，即根据内容自适应。这在实现两栏布局时尤为明显：用 float 做侧边栏需要手动设宽，而用 overflow 做主内容区则自然占满剩余空间（配合 margin 规避重叠）。
2.1 对外部边距折叠的影响
BFC 能阻断内部外边距与外部的外边距折叠。overflow 创建的 BFC 因为仍在流中，可用来包裹子元素防止其 margin 穿透到父级之外；float 创建的 BFC 由于自身已脱离流，其外部兄弟元素与它的 margin 本就不处于同一普通流上下文，折叠规则自然不同。
举例来说，一个 overflow:hidden 的父 div 包着一个有 margin-top 的子 div，子 div 的 margin 不会跑到父 div 外面；而一个 float 元素自身的 margin 只影响它和其他浮动或环绕元素的距离，不会与父容器普通流盒子折叠。
2.2 包含浮动与自身浮动的区别
overflow 建立 BFC 的典型场景是“包含内部浮动”，即父级用 overflow 把浮动的子元素高度算进来。float 建立 BFC 的元素自己就是浮动者，它不会去包含别的浮动来撑高自己，反而需要别的机制（如 clear 或父级 BFC）来清理它造成的影响。
这也解释了为何用 overflow 做清除浮动容器很普遍，而 float 本身却是被清除的对象。二者虽同是 BFC，但一个是管理者角色，一个是逃逸者角色。
三、实际使用建议与代码示例
在开发中，若目标是防止父容器高度塌陷且不想改变元素排列，优先使用 overflow:hidden 建立 BFC；若目标是实现文字环绕或多列浮动布局，则使用 float 并配合 clear 或父级 BFC 处理后续影响。切勿因为“都能触发 BFC”就混用二者。
以下示例对比两种写法：左侧用 overflow 做自适应主栏，右侧用 float 做固定侧栏，展示它们如何共存于一个布局中。
.container {
width: 600px;
}
.sidebar {
float: left;
width: 150px;
height: 200px;
background: #eee;
}
.main {
overflow: hidden; /* 建立 BFC，占据剩余宽度且包含内部浮动 */
height: 200px;
background: #f5f5f5;
}
上述结构中，.sidebar 因 float 左移并脱离流，.main 通过 overflow:hidden 建立 BFC 后自动填满右侧剩余空间，且内部若再有浮动也不会溢出容器。若把 .main 也改成 float:left，则两块都脱离流，父容器将塌陷，需要额外 clear 修复。
四、总结
overflow 与 float 都能创建 BFC，但 overflow 是在普通流内建立隔离渲染区，元素不浮动、宽度撑满、用于包含与裁剪；float 是脱离普通流并建立隔离区，元素收缩宽度、被后续内容环绕、用于排版漂移。理解这层“同果不同因”的机制，才能在清除浮动、自适应布局和防溢出等场景中精准选型。