什么是BFC?

BFC

BFC全称：Block Formatting Context 块级格式上下文

BFC是页面中满足一些布局规则的独立区域,该区域内的布局规则不会影响外部的元素

常见的布局规则:

• 普通流
  • 元素按照在页面中的先后顺序至上而下布局
  • 行内元素水平对齐,直到这一行被占满后自动转行
  • 每个块级元素占一个新行
  • html标签中所有元素都默认按照普通流的规则进行布局
• 浮动
  • 浮动元素"漂浮"在其他元素上方,不占位置
  • 浮动分为left和right
  • 设置浮动后的元素会在父元素的宽度范围内,尽可能的向左或向右偏移,如果一行被占满,浮动元素会自动换行
• 定位
  • static 默认
  • relative 相对元素自身的正常位置进行定位
  • fixed 相对视口定位
  • absolute 相对设置了position并且值不为static的元素进行定位
  • sticky 在relative和fixed之间切换,在页面滚动时是fixed定位,当符合top\bottom或者left\right的值时就变成relative定位

BFC特性:

• 内部盒子会在垂直方向一个接一个放置
• 这些盒子垂直方向的距离由margin决定
• margin塌陷:属于同一个BFC区域中的两个相邻盒子的margin值会重叠

触发BFC的6种方式:

1. 设置元素float并且值不为none
2. 绝对定位position值为absolute或fixed
3. display值为inline-block\table-cell\table-caption\table\table-row\table-row-group\table-header-group\table-footer-group\inline-table\flow-root\flex\inline-flex\grid\inline-grid
4. overflow值不为visible的块级元素,为auto\scroll\hidden
5. contain的值为layout\content\paint的元素
6. body根元素

BFC的作用:

1. 清除浮动

• 给元素设置overflow:hidden来清除浮动
• 不能使用position来清除浮动,这样会导致父级元素本身脱离文档流

2. 解决margin塌陷

• 给存在margin塌陷的两个盒子都设置overflow:hidden,将这两个盒子分开,分别放在两个不同的BFC区域中,就能解决margin值重叠的问题

IFC

• 全称:Inline Formatting contexts 内联格式上下文

GFC

• 全称:GrideLayout formatting contexts 网格布局格式化上下文
• 将display设置为grid

FFC

• 全称:Flex formatting contexts 自适应格式上下文
• 将display设置为flex或inline-flex