【谈谈你对BFC的理解】

定义：

BFC就是一个块级容器，它会隔离外部，让盒子里面的元素不影响外面的元素，也就是在搭建页面的时候，不影响外面的布局。

为什么要知道BFC?

因为在页面的时候可能会发现，为什么会高度塌陷，为什么边距不是我想要的等系列问题

当内部元素使用浮动的时候，外面盒子计算不到高度，就会导致高度塌陷

 如果两个块级盒子都设置了margin值，两个盒子相邻的那一边的maragin会重叠，比如第一个盒子设置margin:10px,第二个盒子设置为20px,他们之间的边距不是30px，而是20px,那么这时候我们就需要使用BFC来解决这些问题

 BFC特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）

2、计算BFC高度时浮动元素也参于计算（重点）

3、BFC的区域不会与浮动容器发生重叠（重点）

4、BFC内的容器在垂直方向依次排列

5、元素的margin-left与其包含块的border-left相接触

6、BFC是独立容器，容器内部元素不会影响容器外部元素

BFC可以解决的问题 

解决边距重叠的问题【正正取大值，正负取相加，负负取小值】

解决高度塌陷的问题

解决相邻盒子浮动区域重叠的问题

BFC常用功能总结

可以利用BFC解决两个相邻元素的上下margin的重叠问题

可以利用BFC解决高度塌陷的问题

可以利用BFC实现多栏布局