html----BFC独立渲染区

BFC 定义

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

BFC布局规则：

 

1.内部的Box会在垂直方向，一个接一个地放置。
 
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（取最大值）
　　　　1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
　　　　2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
　　　　3、两个外边距一正一负时，折叠结果是两者的相加的和。
　　
 
3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
 
4.BFC的区域内，不会与float 的 盒子 重叠。
 
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
 
6.计算BFC的高度时，盒子内部 浮动元素也参与计算 

哪些元素会生成BFC?

 

根元素 html
 
float    为left,right,      不为none
 
position 为absolute或fixed，，不是static或者relative
 
display  为inline-block, table-cell, table-caption, flex, inline-flex
 
overflow  为hidden，scroll   不为visible

BFC可以做什么呢？

1. 解决高度塌陷

2.利用BFC避免外边距折叠
　　BFC可能造成外边距折叠，也可以利用它来避免这种情况。
　　BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。
　　所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。

3.使用BFC避免文字环绕

4.在多列布局中使用BFC

　　　　　　如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。