2.5.1 BFC基本概念
BFC: 块级格式化上下文
BFC基本概念：BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。
父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。
2.5.2 BFC原理（渲染规则|布局规则）：
（1）内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置；
（2）Box 垂直方向的距离由 margin (外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；
（3）每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；
（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float；
（5）BFC 的区域不会与 float Box 重叠（清浮动）;
（6）计算 BFC 的高度时，浮动元素也参与计算。
2.5.3 CSS在什么情况下会创建出BFC（即脱离文档流）
0、根元素，即 HTML 元素（最大的一个 BFC）
1、浮动（ float 的值不为 none ）
2、绝对定位元素（ position 的值为 absolute 或 fixed ）
3、行内块（ display 为 inline-block ）
4、表格单元（ display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性 )
5、弹性盒（ display 为 flex 或 inline-flex ）
6、默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）
2.5.4 BFC作用（使用场景）
1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
2、避免元素被浮动元素覆盖
3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div 的同一个 BFC 区域之内）
4、去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠
2.6 IFC
2.6.1 IFC基本概念
IFC: 行内格式化上下文
IFC基本概念：
2.6.2 IFC原理（渲染规则|布局规则）：
（1）内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置；
（2）这些 Box 之间的水平方向的 margin，border 和padding 都有效；
（3）Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认，文本与图片对其），例：line-heigth 与 vertical-align。
下面说一下IFC，在这之前先看一个例子，这个是我在开发中遇到的问题，
.box{
width:150px;
height:150px;
display:inline-block;
word-wrap:break-word;
background:green
}
<div class='box'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div class='box'>asdfasdfasdf</div>
效果如下：
可以看到第二个inline-block发生了下陷，这里的知识就涉及到了IFC。这里也不卖关子，给第二个添加vertical-align:top;属性就可以解决问题。
首先说一下行级盒子的宽度和高度，可以很容易的发现，对<span>这个inline-level box设置宽度和高度并没有什么作用(对于行内元素，设置margin,padding的top 和 bottom也是不起作用的)，他有自己的宽高计算方法，高由font-size决定的，宽等于其子行级盒子的外宽度(margin+border+padding+content width)之和。
再说一下Inlinebox,总的来说，inlinebox就是布局中的一行，里面可以只包含一个<span>行内元素，也可以包含多个<span>或者inline-block.
inlinebox也有自己的宽高度计算的方法，宽度取决于内部元素的宽度，最大为父元素的宽度，linebox的高度取决于linebox元素，一般由最高的元素决定linebox的高度。
这里我不对于BFC 做过多解释，如果想了解更深的，可以参照这篇文章，不过我倒是觉得如果不是太偏执，不需要这样，毕竟<span>嵌套<span>也许永远也不会用到这种操作。
要解决上面的问题，更多的应该关注行内元素的对齐方式,默认是baseline对其，来一张图；
由此可见，之前的对其方式为baseline对齐顾导致下陷。
下面总结几条inline元素的baseline位置：
inline元素的baseline，为内容盒content-box里面文本框的基线。
inline-block的外边缘就是margin-box的外边缘，
如果inline-block内部有内容，则baseline为内容最下方的baseline，参照刚才给出的例子。
如果Inline-block内部无内容，则baseline与margin-box的下边缘重合。
如果overflow属性不为visible（默认）,则baseline与margin-box的下边缘重合。
这里给出一个例子做讲解，剩下的可以自己去尝试。
.box{
width:150px;
height:150px;
display:inline-block;
word-wrap:break-word;
background:green
}
.box1{
width:150px;
height:150px;
overflow:hidden;
display:inline-block;
word-wrap:break-word;
background:green
}
<div class='box1'>asdfasdfasdfffffffffffffffffffffffffffffffffffffffffffffffff</div>
<div class='box'>asdfasdfasdf</div>
执行结果如下，可见baseline与第一个inline-block的margin-box重合了。
IFC和BFC就介绍到这里，如果有问题欢迎提出指正。
————————————————
版权声明：本文为CSDN博主「Run_youngman」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/run_youngman/article/details/79343911