什么是BFC及BFC的作用

BFC的全名为Block Formatting Context,块式格式上下文
BFC是一个独立的布局环境,这个盒子内部构造如何都不会影响这个盒子外部 并且在一个BFC中块元素和行元素会垂直的沿着其父元素的边框排列.

BFC布局规则:
1.内部的盒子会竖直排列,挨个放置
2.盒子的垂直方向距离由margin决定,一个BFC中的两个相邻盒子margin会重叠
3.BFC中每一个盒子的margin-left会触碰到容器(对于从右到左的格式来说,则触碰到右边缘),即使存在浮动也是这样
4.BFC区域不会和浮动的盒子重合,如果两个盒子,上面的盒子浮动,下面的盒子不浮动,那么下面的盒子会上来,上面的浮动盒子会遮挡住未浮动盒子,(但是如果上面不浮动,仅下面浮动,那么不会影响上面的盒子)此时如果对被遮挡的盒子添加overflow:hidden属性那么将不会重合

BFC触发条件:
1.使元素浮动(一般只对父元素中的子元素用,不然父元素浮动会影响到整个页面)
2.position的值不为static和relative
3.display不为none
4.overflow除了visible
5.根元素

BFC的作用:
1.解决浮动塌陷
2.可以做出两栏布局 对未浮动的元素添加overflow:hidden属性
3.解决margin值重叠的问题