对于BFC的理解?

📕定义

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

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

🔑如何触发BFC

我们来看mdn的说明

image-20211030152550472

🐻作用

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

❗注意

    创建BFC时,最好使用 display:flow-root这个属性,这个是创建一个无副作用的BFC,这个flow-root类似于html根元素
posted @ 2021-09-26 17:47  CodeSpirit  阅读(140)  评论(0)  编辑  收藏  举报