BFC

BFC 及其应用

BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

BFC的目的就是形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

创建 BFC 的方式有：

1. html 根元素
2. float 浮动
3. 绝对定位
4. overflow 不为 visible
5. display 为表格布局或者弹性布局；

BFC 主要的作用是：

1. 清除浮动
2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

BFC的布局规则：

内部的box会在垂直方向，一个接一个的放置，

Box垂直方向的距离由margin决定，属同一个BFC的两个相邻Box的margin会发生重叠。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之如此

每个盒子的margin box的左边，与包含块border box的左边相接触，即时存在浮动也是如此。

如何创建BFC：

Float的值不是none。

Position的值不是static或者relative、

Display的值是inline-block、table-cell、flex、table-caption或者inline-flex。

Overflow的值不是visible。

三种情况

父元素不设置高度 子元素浮动会出现父元素高度塌陷

不存在BFC情况下会出现margin重叠

每个盒子的margin box的左边，与包含块border box的左边相接触，设置BFC不会与浮动重叠