美文网首页饥人谷技术博客
BFC是什么?如何形成BFC,有什么作用?

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

作者: Maggie_77 | 来源:发表于2016-11-29 20:54 被阅读0次

BFC的定义:

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

如何形成:

  • 根元素
  • float属性不为none
  • position为absolute或fixed
  • display为inline-block, table-cell, table-caption, flex, inline-flex
  • overflow不为visible

作用:

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

相关文章

网友评论

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

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