BFC是什么？

BFC 全称 Block Formatting Context (块级 格式化上下文)

官方介绍:A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context

1.一个BFC区域只包含其子元素，不包括其子元素的子元素。

2.并不是所有的元素都能成为一块BFC区域，只有当这个元素满足条件的时候才会成为一块BFC区域。

3.不同的BFC区域之间是相互独立的，互不影响的。

触发BFC的条件

·body根元素

·设置浮动，不包括none

·设置定位，absoulte或者fixed

·行内块显示模式，inline-block

·设置overflow，即hidden，auto，scroll

·表格单元格，table-cell

·弹性布局，flex

可以解决的问题

margin塌陷问题

浮动的影响

标准流元素被浮动元素覆盖