BFC

BFC( Block Formatting Content)块级格式化上下文。它是一个独立的渲染区域,只有Block-level box参与。一个创建了新的BFC的盒子是独立布局的,盒子里的子元素的样式不会影响到外面的元素,两个相邻元素之间的垂直距离取决于margin,即相邻块级元素垂直边距会折叠。

BFC即Block Formatting Content。首先大家知道Box即CSS布局的对象和基本单位,是盒模型,不同类型的Box会参与不同的Formatting Content,有不同的渲染方式。Formatting Content指页面中的一个渲染区域,并且拥有一套渲染规则,决定了其子元素如何定位,以及与其他元素的相互关系和作用。最常见的Formatting Content是Block Formatting Content(简称BFC)和Inline Formatting Content(简称IFC)。

BFC布局规则

• 内部的Box会在垂直方向,一个接一个的放置;
• Box垂直方向的距离由margin决定,同一个BFC的两个相邻Box的margin会折叠;
• 每个元素的margin box的左边,与包含border box的左边相接处(对于从左往右的格式化,否则相反),即使浮动也是如此;
• BFC的区域不会与float box重叠;
• BFC就是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素,反之亦如此;
• 计算BFC的高度时,浮动元素也参与计算。

什么导致BFC的生成?

• 根元素
• Float属性不为none
• Position为absolute或fixed
• Display为inline-block,table-cell,table-caption,flex,inline-flex
• Overflow不为visible

综上,可见BFC就是页面上的一个隔离的独立容器,其内部与外部元素不会相互影响。因此,当BFC外部存在浮动时,不影响内部box布局,BFC会变窄而不与浮动元素重叠。当BFC内部存在浮动时,它计算高度时会包括内部浮动子元素的高度,避免margin重叠也是这样的道理。