能触发bfc的css属性除overflow外，还有display: flow-root（推荐）、display: table-cell/table-caption、position: absolute/fixed、display: flex/grid；inline-block虽触发bfc但因行内级特性不适用于清除浮动。
哪些CSS属性能触发BFC（除了overflow）
能触发BFC的属性不止 overflow，但容易误以为“只要设了非visible就行”——其实关键看是否满足BFC生成条件：**浮动、绝对定位、行内块、表格单元格、弹性/网格容器、或特定overflow值之外的几个明确声明**。
真正可靠且常用的还有以下三类：
-
display: flow-root—— 专为清除浮动设计，语义清晰，现代浏览器支持良好（Chrome 64+/Firefox 59+/Safari 15.4+），推荐优先用 -
display: table-cell或display: table-caption—— 触发BFC，但会改变盒模型行为（比如默认有padding、对齐方式），慎用于布局容器 -
position: absolute或position: fixed—— 父元素是否BFC不影响它自身，但它自己会形成BFC；注意：脱离文档流，不适用于常规浮动清除场景
为什么display: inline-block不行？
它确实会创建BFC，但问题在于：它会让元素变成行内级盒子，受空格/换行影响产生不可控间隙，且无法100%撑满父容器宽度。实际清除浮动时，你通常需要一个块级容器来包裹浮动子项，而inline-block破坏了这个前提。
常见错误现象：
– 父容器高度塌陷依旧存在（因为没真正“包裹住”浮动）
– 左右浮动元素被挤到下一行
– 设置width: 100%无效
立即学习“前端免费学习笔记（深入）”；
所以别为了“触发BFC”硬套inline-block，它不是清除浮动的合理解法。
display: flex和display: grid算不算？
算，而且非常有效——它们的容器默认就是BFC根元素。但要注意：这不是“副作用”，而是规范定义的行为。只要你把父容器设成display: flex或display: grid，内部浮动子元素就自动被包含在BFC中，父容器不会塌陷。
不过得确认使用场景是否匹配：
- 如果只是想清浮动，却强行改成
flex，可能破坏原有文档流语义（比如影响屏幕阅读器顺序、打印样式） -
grid同理，还可能引入额外的轨道计算开销（虽微小） - 兼容性上，
flex比flow-root更老，但IE10+才支持完整flex，而flow-root在IE中完全不支持
最容易被忽略的坑：overflow: clip和overflow: hidden的区别
很多人以为overflow: hidden是唯一安全选项，其实overflow: clip才是更干净的选择：它只裁剪溢出内容，不触发滚动机制（无滚动条、不支持键盘导航滚动），性能略优，且语义更准确。
但注意两点：
- Chrome 94+ / Firefox 97+ / Safari 15.4+ 才支持
clip，旧版本会回退到visible（即不触发BFC） - 不要写成
overflow-x: clip单独设置某方向——目前只有全向overflow属性支持clip
BFC触发本身不难，难的是选对那个既满足功能、又不引入新问题的属性。别只盯着“能不能清浮动”，得多看一眼它对语义、可访问性和兼容性的影响。
