# BFC

# BFC定义

• Block Format Context：块级格式化上下文
• 是一个拥有独立渲染区域的盒子
• 规定了内部元素如何布局，盒子内部元素与外部元素互不影响

# BFC布局规则

• 内部子元素在垂直方向上，边距会发生重叠
• 外面的元素不会影响里面的元素，反之亦然 【例1】
• 设置为BFC的元素不会与float box区域重叠 【例2】
• 计算BFC高度时，浮动子元素也参与计算 【例3】

【例1】：父子元素发生margin重叠

【例2】：左侧盒子浮动，右侧标准流的元素会有一部分跑到左边盒子的下面

【例3】：清除浮动。儿子浮动了，但是父亲没有设置高度，导致看不到父亲的背景色 （儿子float box也会参与计算）

# 如何创建BFC

满足以下条件之一：

• 根元素（HTML元素）
• float不为none
• overflow不为visible
• position:fixed / absolute
• display: table-xx / inline-block,inline-flex,flex

# BFC的作用

• 消除margin合并
  • 发生合并原因是同属于一个BFC，让其在不同BFC
• 清除浮动，让父元素包住脱离文档流的元素
  • 计算BFC高度时，浮动元素也参与计算