BFC的理解

BFC是什么

BFC全称Block Formatting Context，也叫块级格式化上下文，是一种块盒子如何布局显示概念。它是页面中的一块独立渲染区域，并且有一套渲染规则规定内部块级盒子如何布局。这块区域与区域外部不会相互影响。

如何生成BFC

• 根元素或其它包含它的元素；
• 浮动 (元素的float不为none)；
• 绝对定位元素 (元素的position为absolute或fixed)；
• 行内块inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的display: table-cell)；
• overflow的值不为visible的元素；
• 弹性盒 flex boxes (元素的display: flex或inline-flex)；
  最常见的是overflow:hidden、float:left/right、position:absolute。

BFC的作用

1. 防止margin重叠
   例子
2. 清除浮动
   例子
3. 页面布局
   例子