BFC

Posted 2020-12-18 liuqyu

一、理解BFC

1.BFC(Box Formatting Context)

Box是css布局的对象和基本单位，直观讲就是一个页面多个Box组成。

元素的类型和display属性决定了这个Box的类型；不同类型的Box，参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。有哪些盒子？

　　block-level box:

　　display属性为block，list-item，table的元素，会生成block-level box,并且参与block fomatting context；

　　inline-level box：

　　display属性为inline，inline-block，inline-table的元素，会生成inline-level box，并且参与block fomatting context；

　　Formatting context:

　　Formatting context是WSC CSS2.1规范中的一个概念。

　　它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。

　　最常见的Formatting context有

　　　　Block fomatting context（简称BFC）。我的概括BFC是一个块级元素，决定在浏览器中如何渲染。

　　　　Inline fomatting context   (简称IFC)。     不重要。

二、BFC是什么

BFC(Block formatting context)直译为“块级格式化上下文”，它是一个独立的渲染区域，只有Block-level box参与，

它规定了内部如何布局。

三、BFC布局规则：

1.内部的Box会在垂直方向，一个接一个地放置；

2.BFC不会与float box重叠

　　应用：两列布局：左边固定，右边自适应，overflow为hidden，去掉左侧遮罩

3.内部box垂直方向距离由margin决定，属于同一个BFC的两个相邻box的margin会重叠。

　　margin外边距重叠三个元素：属于同一BFC；相邻的；块级元素

4.计算BFC的高度时，浮动元素也参与计算。（清除浮动haslayout）

5.BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。

四、BFC什么时候出现（哪些元素会生成BFC）

根元素

float属性不为none

position为absolute或fixed

overflow不为visible