美文网首页
什么是BFC?如何形成BFC?有什么作用?

什么是BFC?如何形成BFC?有什么作用?

作者: lvyweb | 来源:发表于2021-10-15 11:02 被阅读0次

BFC定义:

BFC(Block formatting context)“块级格式上下文”,是一个独立的渲染区域,只有Block-level Box参与,规定内部Block-level Box如何布局,并且与这个区域外部毫不相干。

如何形成

  • 根元素
  • float属性不为none(left或right)
  • position为absolute或fixed
  • display为inline-block,table-cell ,table-caption,inline-flex
  • overflow 不为visible(hidden,auto,scoll)

作用

  • 创建BFC来避免垂直外边距叠加
  • 创建BFC来清除浮动
  • 创建BFC来实现自适应布局

相关文章

网友评论

      本文标题:什么是BFC?如何形成BFC?有什么作用?

      本文链接:https://www.haomeiwen.com/subject/wqtmoltx.html