bfc

1.使 BFC 内部浮动元素不会到处乱跑；  //解决高度坍塌
2.和浮动元素产生边界。  //实现自适应布局  overflow:hidden
3.解决margin重叠:1.同级元素上下margin重叠 (可以理解为margin指的是空白,而bfc会创建固定高度,所以可以解决)  一个子元素设置inlineblock
               2.父子上margin或者下margin 一起下降了(没有border,padding,margin指的是空白,因为重叠了所以一起下降)   可以给父设置overflow;HIDDEN或者给父padding或者border

触发条件:

• 根元素或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素

https://www.jianshu.com/p/0d713b32cd0d