css---格式化上下文

BFC( Block Formatting Context)

BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，
介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）
首先要明确BFC是什么意思，其全英文拼写为 Block Formatting Context 直译为“块级格式化上下文”。
在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。

Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。
元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box，
会参与不同的 Formatting Context（译为：格式化上下文）（一个决定如何渲染文档的容器），
因此Box内的元素会以不同的方式渲染.
Formatting context 是 W3C CSS2.1 规范中的一个概念。
它是页面中的一块渲染区域，并且有一套渲染规则，
它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的 Formatting context 格式化上下文有
Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC布局规则

（1）内部的Box会在垂直方向，一个接一个地放置。
（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，
    否则相反)。即使存在浮动也是如此。
（4）BFC的区域不会与float box重叠。
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
（6）计算BFC的高度时，浮动元素也参与计算（清除浮动）
 ul--li--float------父级--高度塌陷----overflow:hidden----触发BFC属性---计算BFC的高度时，
     浮动元素也参与计算
 哪些元素会生成BFC?
（1）根元素
（2）float属性不为none
（3）position为absolute或fixed
（4）display为inline-block, table-cell, table-caption, flex, inline-flex
（5）overflow不为visible，

BFC的应用

 ①浮动覆盖问题
 ②清除内部浮动 
 ③防止垂直margin重叠

IFC(Inline Formatting Context)

"行级格式化上下文"
IFC布局规则：
①在一个行内格式化上下文中，盒是一个接一个水平放置
②这些盒之间的水平margin，border和padding都有效
③盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐
④行内块级元素之间默认留有间隙
⑤矩形区域包含着来自一行的盒子叫做line box，line box的宽度由浮动情况和它的包含块决定，
高度由line-height的计算结果决定

FFC(Flexible Formatting Context)

"弹性盒格式化上下文"
CSS3引入了一种新的布局模型——flex布局。
flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，
flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。
flex布局提供一种更加有效的方式来进行容器内的项目布局，
以适应各种类型的显示设备和各种尺寸的屏幕，
使用Flex box布局实际上就是声明创建了FFC(自适应格式上下文)

GFC(Grids Formatting Context)

"网格格式化上下文"
CSS3引入的一种新的布局模型——Grids网格布局，目前暂未推广使用，
使用频率较低，简单了解即可。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。
但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，
可以看作是二维布局。Grid 布局远比 Flex 布局强大。

文档流

在布局时候，较早时经常会使用浮动，使用浮动元素会脱离文档流.
在CSS中主要有三种流： normal flow（普通流，我们经常将的脱离，脱离的就是它）、
floats浮动流、Absolute Posioning定位流（position不为static、relative）
将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。

需要注意

使用float脱离文档流时，其他盒子会无视这个元素，
但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。