BFC是什么？

2022-02-16 164 阅读1分钟

`BFC`是什么？

1.定义

BFC(block formatting context) 直译为 块级格式化上下文。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的 Block-level box如何布局，并且与这个外部区域豪不相关

2.布局规则

内部的 Box 会在垂直方向，一个接一个地放置
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）。即使浮动也是如此
BFC 区域的不会与 float box 重叠
BFC就是页面上一个独立的隔离容器，容器里面的子元素不会影响到外面的元素。反之也如此
计算 BFC 的高度时，浮动元素也参与计算

3.哪些元素会生成 `BFC`

根元素
float 属性不为 none
position 为 absolute 或 fixed
diplay 为 inline-block，table-cell , table-caption,flex,inline-flex
overflow 不为 visible