BFC

什么是BFC?

• 简单的来说：BFC就是一个css的一个布局概念，是一个独立的区域，是一个环境。

文档流

• 说BFC之前先说说文档流，文档流分为：浮动流、定位流、普通的标准流，而普通标准流其实就是BFC中的FC。

FC：

• formatting context的英文缩写，翻译过来就是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及与元素之间的关系和作用。

常见的FC：

• BFC(块级格式化上下文)、IFC(行级格式上下文)、GFC(网络布局格式上下文)、和FFC(自适应格式上下文)。

BFC的定义

• BFC（Block formatting context ）“块级格式上下文”。是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。

触发BFC条件？

• float的值不是none。
• position的值不是static或者relative。
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不是visible

BFC的作用

BFC是页面独立的一个容器，与外界的毫无关系。
与不同容器的区别是：

1：可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）

绿色盒子浮动遮挡了红色盒子

image.png

触发红色盒子的BFC，可防止被绿色盒子遮挡

image.png image.png

2: 可以包含浮动的元素—清除浮动

说明：我们知道当浮动的盒子的父元素没有高度时，会出现高度塌陷现象。

绿盒子设置浮动前，父盒子被撑开高度：

image.png

绿盒子设置浮动后，父盒子高度塌陷：

image.png image.png

3：解决同一个BFC区域的垂直方向margin塌陷的问题

属于同一个BFC的两个相邻的box的margin会重叠，以大的为主。要想解决这个问题，可以将两个盒子分为不同的BFC中。

在同一个BFC中时：

image.png

分为两个不同的BFC之后：

image.png image.png