-
FC
在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
Box：css布局的基本单位
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。并且参与 inline formatting context；
Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC
定义
BFC（Block formatting context) 直译为”块级格式化（环境/上下文）。它是一个独立的渲染区域，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。只有Block-level box 参与，它规定了内部的Block-level Box如何布局。
BFC的布局规则
W3C原文
翻译为中文
- 内部的box会垂直方向上，一个接着一个显示。（标准文档流）
- box垂直方向的距离由margin决定，属于同一个BFC 的两个相邻的盒子的margin会发生重叠。
- 如果两个盒子属于不同的BFC区域，盒子的margin不会发生重叠，外边距重叠问题的解决
- 每个元素的左外边缘（margin-left）,与包含块的左边相接触（对于从左往右排列的格式化，否则相反）；即使存在浮动也是如此，除非这个元素自己形成了一个新的BFC区域。
- BFC区域不会与float box重叠
- 可以让浮动元素和非浮动元素（BFC）可以同行显示，不会发生重叠
- BFC区域就是页面上一个独立的容器，容器里面的子元素不会影响外面的元素，反之亦然；
- 计算BFC区域的高度时，浮动元素也参与计算
- 可以解决子元素浮动，父元素高度塌陷问题
如何创建BFC（成为BFC容器）
- float的值不为none（可选值：left，right）
- position的值不是static、relative(可选值：absolute、fixed、sticky)
- display的值为inline-block、table-cell、flex、table-caption、inline-flex
- overflow的值不是visible（可选值：hidden、scroll、auto)
BFC的应用
场景一：每个元素的左外边缘（margin-left）,与包含块的左边相接触（对于从左往右排列的格式化，否则相反）；即使存在浮动也是如此，除非这个元素自己形成了一个新的BFC区域。
场景二：BFC区 域不会与float box重叠，可以用于实现三列布局
- 三列布局：左右两边固定，中间自适应
<style> .container{ width: 100%; border: 1px solid red; } .left{ width: 200px; height: 200px; background-color: pink; float: left; } .right{ width: 200px; height: 200px; background-color: tomato; float: right; } .center{ height: 300px; background-color: yellowgreen; overflow: hidden; } </style> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>场景三：计算BFC区域的高度时，浮动元素也参与计算
- 可以解决子元素浮动，父元素高度塌陷的问题
<!-- 计算BFC区域的高度时，浮动元素也参与计算 --> <style> .container{ border: 1px solid red; /* BFC容器 */ /* overflow: hidden; */ /* float: left; */ /* position: absolute; */ display: inline-block; } .item{ width: 200px; height: 200px; border: 1px solid green; float: left; } </style> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>场景四：box垂直方向的距离由margin决定，属于同一个BFC 的两个相邻的盒子的margin会发生重叠。
- BFC区域可以用来解决margin重叠性问题，将其中一个盒子放进一个新的BFC容器里面
总结
以上例子都体现了：
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
IFC
定义
Inline Formating Context(行内格式化上下文)，简称IFC。
指的是一行的区域的渲染规则，确定了一行中行级元素是如何进行排列，以及对齐方式
IFC区域的特点
在IFC中，盒子水平放置，一个接着一个，从包含块的顶部开始
盒子间margin、padding在水平方向有效
这些盒子可以通过不同的方式进行对齐：可能通过底部和顶部进行对齐，通过基线进行对齐
- 绿色：顶线
- 蓝色：中线
- 红色：基线
- 紫色：底线
行盒：IFC负责的矩形区域就叫行盒，指一行的渲染区域，每一行都有多个元素共同组成行盒（line box）
- 行盒的宽度：有内容和包含块决定
- 行盒的高度：由内部元素共同决定
主要影响IFC布局（行盒高度）的css属性
font-size：不同的字体大小，会影响行盒的高度font-family：不同的字体类型，会影响行盒的高度height | line-height：不同的值都会影响行盒的高度vertical-align：设置元素的对齐的方式，不同的方式也会影响行盒高度
font-size
- 不同的font-size会影响行盒的高度，取较大的那个值
font-family
- 不同的font-family会影响行盒的高度，原因在于，设计时默认了不同的字体有不同的高度
height | line-height
line-height：指的是行高，行高指的是文本最高点到最低点区域。height | line-height都会影响行盒的高度，值越大，行盒的高度越高
vertical-align
设置行级元素的垂直对齐方式
baseline:默认值，基线对齐middle：中线对齐top：顶线对齐bottom：底线对齐
文本之间
文字与文字之间的对齐方式，设置这个属性设置参考线，文本默认是 基线和其他元素对齐
文本和图片之间
文本和图片之间的对齐方式，文本默认是以基线和图片默认的底部进行对齐
- 文字设置
vertical-align：图片按照文本的对齐方式（参考线）来对齐 - 图片设置
vertical-algin：文本按照图片的对齐方式（参考线）来对齐
表格中文字垂直方向对齐方式
table中文本在垂直方向显示位置，设置单元格中文本在垂直方向的显示位置
top：单元格中文本顶对齐bottom：单元格中文本底对齐middle：默认，单元格中文本垂直方向上居中对齐