一、 BFC的概念
BFC——block formating context的缩写,中文译为"块级格式化上下文"
二、如何触发BFC
1.设置float除none以外的值(left,right)
2.设置overflow除visible以外的值(hidden,auto,scroll)
3.设置display属性(table,table-cell,inline-block,flex)
4.设置position属性(fixed,absolute)
三、BFC的作用
1.可以解决上下margin重叠问题
可以给其中一个元素在外层嵌套一个父容器,并设置overflow:hidden;这样为里面的元素创建了一个块级格式化上下文
2.可以解决高度塌陷问题
父元素高度自适应,子元素浮动脱离文档流,不占据父元素空间,导致父元素高度为0,此时给父元素设置overflow:hidden,闭合浮动,触发了BFC
3.可以实现多栏布局
两个浮动元素相邻,另外一个元素设置overflow:hidden;触发了BFC