BFC

BFC （块级格式化上下文），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发条件:

 

• 1、浮动元素，float 除 none 以外的值； 
  2、绝对定位元素，position（absolute，fixed）； 
  3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions； 
  4、overflow 除了 visible 以外的值（hidden，auto，scroll）

使用场景:

• 1，浮动元素无法撑起父元素：
• 2，不被浮动元素覆盖 ：
• 3，BFC解决margin塌陷问题：