持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情
前言
css的各种上下文是由”display“属性定义的，它影响着页面整体的布局形式，非常重要；总共有以下几种：内联格式化上下文、块级格式化上下文、自适应格式化上下文、栅格格式化上下文
内联格式化上下文IFC
inline inline-block inline-table等属性可以生成内联格式化上下文；
内联格式化上下文的特点：linebox线框高度由其包含的行内元素中最高的实际高度计算而来，不受竖直方向的padding和margin影响
注意：linebox线框高度和文字高度不一样，在选择元素查看的时候只能看到文字高度，线框高度则需要我们自己有一个概念
内联格式化上下文元素之间会产生“空白节点”；需要设置父元素font-size为0才能消除
内联格式化上下文最难的一点就是：verticle-align垂直居中问题
首先记住四格五线：上行线（大写字母高度紧挨上行线）中线 基线 下行线
- x元素以中线对齐上下等分，我们所有的元素对齐都是基于x的对齐
- 汉字与大写字符一样是上行线对齐的
块级格式化上下文BFC
页面上形成独立的容器，容器里的子元素不会影响外部元素，反之也如此
特点：
-
两个相邻元素垂直方向外边距折叠
-
浮动元素参与计算BFC高度 -- 用于清除浮动
overflow:hidden当设置”overflow:hidden“时元素生成BFC，造成浮动的子元素参与高度计算，于是高度塌陷就消失了
-
BFC区域不与float box重叠
如何生成BFC？
-
根元素（html）
-
float不为none
-
overflow不为visible(最常用的hidden、scroll、auto)
-
position:absolute/fixed
-
display:inline-block/table-cell/table-caption/flex/inline-flex（注意inline-bloack既会产生IFC也会生成BFC）
BFC的作用：利用特性3实现左图右文（有的情况下也可以实现文字环绕哦）；解决浮动元素高度塌陷问题；
自适应格式化上下文FFC
flex inline-flex实现自适应格式化上下文
子元素同一行展示；如果指定宽度之后必须设置flex-wrap才能让元素进行换行
flex和inline-flex又有不同，inline-flex父元素可以同一行展示，而flex元素需要独占一行
栅格格式化上下文GFC
grid可以实现栅格格式化上下文
grid布局的能力强大，除了可以实现flex布局所提供的的能力之外，有强大的布局能力，比如说给定一个固定的dom结构，能够设计出不同的样式布局
总结
本文介绍了css的各种布局上下文，其中BFC是面试常考的内容，必须要掌握；内联格式化上下文则需要我们熟练运用，我们会经常碰到样式上的问题；其他的可作了解；
