欢迎光临
我的个人博客网站

对于BFC的理解?


📕定义

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

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

🔑如何触发BFC

我们来看mdn的说明

对于BFC的理解?

🐻作用

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

❗注意

    创建BFC时,最好使用 display:flow-root这个属性,这个是创建一个无副作用的BFC,这个flow-root类似于html根元素
赞(0) 打赏
未经允许不得转载:张拓的天空 » 对于BFC的理解?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏