BFC详解

BFC详解

简介

在解释BFC之前，先了解一下文档流。

文档流分为定位流、浮动流、普通流三种。而普通流其实就是BFC中的FC。

FC（Formatting Context），直译过来就是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了里面的子元素如何布局，以及和其他元素之间的关系和作用 。

常见的FC有BFC、IFC，还有GFC和FFC。

BFC（Block Formatting Context）块级格式化上下文：用于布局块级盒子的一块渲染区域。

三种文档流的定位方案：

常规流（Normal flow）：

• 在常规流中，盒子一个接着一个排列。在块级格式化上下文里面，盒子竖着排列。在行内格式化上下文里面，盒子横着排列。
• 在position为static或者relative，并且float为none的时候，会触发常规流。

浮动（Floats）：

• 浮动元素不会影响块级元素的布局，但会影响行内元素的布局，让其围绕在自己周围，撑大父级元素，从而间接影响块级元素布局。
• 行内元素出现在左浮动元素的右边和右浮动元素的左边，左浮动元素的左边和右浮动元素的右边是不会摆放浮动元素的。

绝对定位（Absolute positioning）：

• 盒子从常规流中移除，不影响常规流的布局。
• 元素的属性position为 absolute或fixed，它是绝对定位元素。

BFC的触发方式

• 根元素，即HTML标签，是最大的一个BFC。
• 给元素设置浮动，触发BFC。
• overflow不为visible，设置为auto、scroll、hiddden等都可以触发BFC。
• display的值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid。
• 绝对定位，position的值为absolute或fixed。

注意：display：table可以生成BFC的原因在于，table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。

BFC的约束规则

• 触发BFC的元素的子元素，会在垂直方向上一个接着一个放置。
• 子元素垂直方向上的距离由margin决定。（解决外边距塌陷问题）
• BFC中子元素不会超出他的包含块，而绝对定位的元素可以超出他的包含边界。
• BFC的区域不会与float得到元素区域重叠。（阻止元素被浮动元素覆盖）
• 计算BFC高度的时候，浮动子元素也会参与计算。（解决父盒子高度塌陷问题）