什么是BFC

BFC(Block Formatting Context,块格式化上下文)指的是CSS布局的一块独立渲染区域。这块区域内只有Block-level box参与布局,因此会表现出一些特性。

触发BFC的常见条件

满足以下条件之一即可触发:

  • HTML元素
  • 浮动元素 float != none
  • 溢出内容不可见的元素 overflow != visible
  • 行内块元素 display = inline-block
  • 绝对定位元素 position = absolute或fixed
  • 弹性元素(flex)、网格元素(grid)的直接子元素
  • 多列容器 column-count != auto
  • display = flow-root 该属性使用flow layout布局内容,也就会创建bfc
  • contain =layout、content或 strict contain用于性能优化,layout声明外部元素与内部元素互不影响,content在layout的基础上声明子元素也不会在content-box外(padding,border,margin)显示,并且counter等具有影响其他元素能力的属性也会被隔离,strict在layout的基础上必须声明宽高,因为在此模式下子元素不能撑开父元素
  • 与表格有关的一些属性

BFC布局特性

浮动定位与清除浮动都只会影响同一个BFC内的元素。

独立的BFC区域不会被浮动元素覆盖,但可以包含。

外边距折叠(Margin collapsing)只发生在同一BFC中的块级元素间。见https://www.guohere.com/4198.html

DIY&&在线演示

http://www.cnblogs.com/xiaohuochai/p/5248536.html