BFC

BFC

BFC 全称 Block Formatting Context。
每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文

---

BFC 的产生

• 根元素；
• float属性不为none；
• position为absolute或fixed；
• display为inline-block, flex, 或者inline-flex；
• overflow不为visible；

---

特性

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

作用

作用
1.margin 合并
2.contain float

---

例子

例子一：让浮动内容和周围的内容等高

添加BFC之前：

之后

例子二：外边距合并

BFC阻止合并外边距

### 使用display: flow-root

一个新的 display 属性的值，它可以创建无副作用的BFC。在父级块中使用 display: flow-root 可以创建新的BFC。