BFC原理

1、BFC定义

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

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

二、formatting context
它是页面中的一块渲染区域，而且有一套渲染规则，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用

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

2、布局规则

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

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

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

给div1设置 margin: 20px 0,给div2设置 margin: 30px 0,此时div1和div2之间的间距为30px。

• 解决方式 让两个元素不属于同一个BFC
  三、BFC区域不会与浮动元素重叠

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

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

给main元素设置 overflow:hidden变为bfc,效果以下：

四、计算BFC的高度时，浮动元素也参与计算
五、每一个元素的margin box的左边， 与 包含块 border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此

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

三、产生BFC的方式

一、overflow属性不是visible
二、float属性不为none
三、display属性为inline-block、table-cell、flex、inline-flex、table-caption
四、position为absolute、fixed
五、body根元素