?定义

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

他是一个独立的渲染区域,相邻之间的BFC不会相互影响

?如何触发BFC

我们来看mdn的说明

?作用

1. 可以利用BFC解决浮动带来的布局影响,在BFC中的浮动元素并不会影响BFC外部的元素
2. 可以利用BFC解决在同一个BFC下相邻两个BOX边距塌陷的问题
3. 可以利用BFC实现两列自适应布局,利用的是浮动和BFC,先让第一个Box浮动起来,第二个盒子变成BFC,这样就不会干扰,并且会在同一行上,实现了两列自适应布局

❗注意

    创建BFC时,最好使用 display:flow-root这个属性,这个是创建一个无副作用的BFC,这个flow-root类似于html根元素