BFC详解

什么是BFC

块格式上下文（Block Formatting Context）BFC。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

Block-level box：display为block，list-item，table-cell的元素；
Inline-level box：display为inline，inline-block， inline-table 的元素

如何创建一个BFC

创建一个BFC区域有以下几种常用的方法

• 设置overflow为不是visible的值；
• 设置position为absolute或者fixed；
• 设置float不为none;
• 设置display为flow-root(无其他副作用，但是兼容性不是很好)；

BFC具有的特性

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(就是margin-bottom和margin-top会取较大值作为两个元素的上下间距)
• 每个元素的margin box的左边， 与包含块border box的左边相接触。margin box的右边会与border-box的左边接触
  
• BFC的区域不会与float box重叠
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

BFC的作用

1、清除浮动和解决盒子塌陷
由于BFC的特性，内部元素的布局不会影响到外部元素的布局，计算BFC的高度时，浮动元素也参与计算。因此设置为BFC的区域会将浮动的元素也包含在盒子内部。
不设为BFC，浮动元素会溢出在外面

设为BFC，包裹float

盒子塌陷不设为BFC，内部元素的margin-top和margin-bottom可以会溢出到盒子外部

盒子塌陷设为BFC，内部元素的margin-top和margin-bottom可以会被包裹在盒子内部

2、普通元素会与浮动元素重叠的问题
如果对一个元素设置为浮动元素，则其他元素会浮动在该元素周围，可能会出现下面的情况

根据BFC的特性，BFC的区域不会与float box重叠，因此我们可以通过这个特性，生成一边定宽，另外一边自适应的布局。

总结

其实BFC的规则最主要就在于

BFC内部的元素布局不会对外部产生影响，外部的布局也不会对内部产生影响

清除浮动（应该是自动将浮动元素计算进自身的高度）以及解决盒子塌陷，都是为了不让内部的布局影响到外部的布局