BFC原理

1、 box

box是css布局的基本单位，元素的类型和display属性决定了box的类型。不同的类型的盒子会参与不同的formatting context。

block-level box :display属性为block、list-item(作为列表显示的元素)、table的元素会生成block-level box。

2、formatting context

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

• BFC（block formatting context）为块级格式化上下文，他是一个独立渲染区域，并且只有block-level box参与，规定了block-level box内部的布局方式。

二、布局规则

1、内部的box会在垂直方向上一个接一个的放置

<div class="div1"></div>
<div class="div2"></div>
复制代码

2、同一个bfc内，两个相邻box元素的margin会产生重叠，重叠距离为数值大的margin值

,此时div1和div2之间的间距为30px。

• 解决方式 让两个元素不属于同一个BFC

  3、BFC区域不会与浮动元素重叠

<div class="left"></div>
<div class="main"></div>
复制代码

此时main元素没有产生bfc,left元素浮动，效果如下：

变为bfc,效果如下：

4、计算BFC的高度时，浮动元素也参与计算

5、每个元素的margin box的左边， 与 包含块 border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

3、产生BFC的方式

1、overflow属性不是visible

2、float属性不为none

3、display属性为inline-block、table-cell、flex、inline-flex、table-caption

4、position为absolute、fixed

5、body根元素