BFC的理解

BFC是什么

BFC全称Block Formatting Context,也叫块级格式化上下文,是一种块盒子如何布局显示概念。它是页面中的一块独立渲染区域,并且有一套渲染规则规定内部块级盒子如何布局。这块区域与区域外部不会相互影响。

如何生成BFC

  • 根元素或其它包含它的元素;
  • 浮动 (元素的float不为none);
  • 绝对定位元素 (元素的position为absolute或fixed);
  • 行内块inline-blocks(元素的 display: inline-block);
  • 表格单元格(元素的display: table-cell);
  • overflow的值不为visible的元素;
  • 弹性盒 flex boxes (元素的display: flex或inline-flex);
    最常见的是overflow:hidden、float:left/right、position:absolute。

BFC的作用

  1. 防止margin重叠
    例子
  2. 清除浮动
    例子
  3. 页面布局
    例子

你可能感兴趣的:(BFC的理解)