这是我参与第四届青训营笔记创作活动的第二天

不知不觉中便已是参与活动的第二天了，今天依旧是关于CSS部分的一些思考，今天写下面两个方面。今天主要写两个方面：

IFC行级格式化上下文

BFC块级格式化上下文

IFC与BFC
FC：格式化上下文 IFC与BFC又分别被称为行级排版（格式化）上下文与块级排版（格式化）上下文我将分别讲一下这两者的概念，使用及区别

IFC

生成条件

块级盒内只包含行内盒即可设display:inline 实现

IFC的特点

子元素会横向排列
子元素只计算横向的padding，margin，border，在一行上会生成行盒
一行不够会换行，被分割成多个行盒
行盒的高度由该行中最高的盒子决定，因此IFC中每个行盒的高度可能不同下面用一个代码片段来理解上述几条内容 code.juejin.cn/pen/7124245… 这个代码片段便可以展示上述的IFC的各个理解，其中第二个盒子我设置了display：inline-block属性,目的是为了设置高度（便以理解第四个特点），因为原本span作为行内元素是不可以设置宽高的。 5.行盒中各盒子从左向右分布，设置了浮动的盒子优先排列在左(右)侧

IFC的使用

1.水平居中
使用text-align:center会使行盒水平居中
2.垂直对齐（这部分在下面会详细说明）

影响IFC的属性

font-size 如下图所示，我给第一个元素设置20px的字体
line-box 行盒模型
vertical-align 有以下常用属性值 baseline,top,middle,bottom也可以取数值，百分比等 ,我设置了vertical-align:middle给第一个行盒的第一个元素来展示这个属性的效果。由下图可见，和垂直对其有关

（查了一些大佬们的博客发现vertical-align这块好像还有更多的知识点并非三言两语可以说清楚，我想在以后再详细的写。）

BFC

BFC的特性

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

如上图，我创建了一个 BFC，在BFC中内部的盒子会从顶部向下排列，一个接一个的放置。

如上图，我分别设置BFC内部两个盒子的底部外边距和顶部外边距，两部分叠加了，所以他们之间距离为20px 。

在这里想让大家思考一下，如何才能让这两个盒子margin不重叠呢？

答案是设置BFC，让他们属于两个BFC，如下图

即如图中我们可以给box2设置个父盒子，并设置为BFC就可以做到两个margin不重叠了

如何产生BFC

下面是产生BFC的几条方式，（上一个图中，我们就是用第二条规则产生了BFC）。

同一个根元素
float的值不为none
overflow的值不为visible
position的值为absolute或fixed
display的值为table-cell, table-caption, inline-block中的任何一个

BFC可以解决哪些问题

1.解决margin重叠
2.解决由于浮动导致的高度塌陷问题

第一个问题我们已经在上面解决了，因此我们来看第二个问题

高度塌陷
父元素高度默认被子元素撑开，当子元素设置了浮动，就会造成父元素高度塌陷，要解决这个问题。我们可以将父元素设置为BFC，便可以解决这个问题了具体如下面代码片段
这段代码就造成了高度塌陷，只需要在box的样式中加上overflow:hidden就可以解决这个问题了 code.juejin.cn/pen/7124312… code.juejin.cn/pen/7124225…

到此为止，关于对IFC和BFC的学习就结束了，其中vertical-align,我会在之后的内容中记录，好累啊~~手都麻了。不过这篇分享的凝练同时，我自己有着很大的收获，我发现写博客确实可以让自己学的更有深度。主要就是有点费手。不过问题不大，只要有进步便是好的。加油！！

IFC与BFC|青训营笔记