块级格式化上下文BFC

BFC(Block formatting context)直译为"块级格式化上下文"，它既不是一个css属性，也不是一段代码。而是css2.1规范中的一个概念。
可以将bfc看成元素的一个属性，触发了元素的bfc后，此时元素就相当于一个箱子，是一个独立的渲染区域。
bfc布局规则

• BFC有隔离作用，BFC中的内部元素不会受外部元素的影响（反之亦然）
• 在一个BFC中，元素按照正常文档流排列
• 在一个BFC中，两个相邻的块盒子在垂直方向的margin会合并
• BFC中的内容不会与外面的浮动元素重叠
• 计算BFC的高度是，它内部的浮动元素也会被计算进行（所以BFC可以清除浮动）

如何触发bfc（即如何为元素设置这个属性）
如何触发BFC（如何创建BFC）？
如果元素中有下面中的任意一个属性，将触发bfc。
根据w3c对bfc的定义，一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

• float的值不是none。 //left,right
• position的值不是static或者relative。//absolute,fixed
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible的块元素 //scroll,hidden
• 根元素，也就是html元素本身就触发了BFC
  

BFC用途

• 清除浮动（可以看浮动那一篇博客）
• 解决外边距重叠
• 宽度自适应的两栏布局

演示利用BFC解决外边距重叠现象

演示宽度自适应的两栏布局

利用BFC中的内容不会与外面的浮动元素重叠这一特点，来实现宽度自适应的两栏布局


如果没加overflow:hidden，则效果如下