什么是BFC

参考B站大佬视频：带你用最简单的方式理解最全面的BFC_哔哩哔哩_bilibili

BFC的定义：

1.BFC属于普通流（即实行行内元素水平排开，块级元素自占一行的规则）

2.BFC可以看作元素的一种属性，这个元素内部的子元素的布局不会影响到外面的元素

如何触发BFC：

 以上7点其中任意一个属性都可以触发BFC

BFC的优点：

1.避免外边距重叠

比如相邻的两个块元素A,B margin 都是10px,那么一般来说它们的间距是10px（取两个margin的最大值），如果把AB分别放在有BFC属性的两个块元素中，则可实现它们的间距是20px.

2.清除浮动 （重点！）

比如父元素A只设定了边框，子元素B是一个有面积的蓝色方块

如果此时把B设置为浮动元素，那么我们将看到图1：

而不是想要的图2这样：

这时，我们可以给父容器添加BFC属性：overflow:hidden(这是一种常用的添加BFC属性的方法)

 这样我们就可以得到图2的效果了