CSS中IFC、BFC、Flex Box

一，行级排版上下文（IFC）

• Inline Formatting Context（IFC）
• 只包括行级盒子的容器会创建一个IFC
• IFC内的排版规则
  • 盒子在一行内水平摆放
  • 一行放不下时，换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align 决定一个盒子在行内的垂直对齐
  • 避开浮动（float）元素*

我的理解：行级排版相对于其他来说时比较简单的排版，就相当于简单div包裹了行内标签，可以实现水平，垂直对齐。

二，块级排版上下文（BFC）

• Block Formatting Context（BFC）

• 某些容器会创建一个BFC

  • 根元素
  • 浮动，绝对定位，inline-block
  • Flex子项和Grid子项
  • overflow值不是visible的块盒
  • display：flow-root

• BFC内的排版规则

  • 盒子从上到下摆放
  • 垂直margin合并
  • BFC内盒子的margin不会与外面的合并
  • BFC不会和浮动元素重叠

我的理解：简单来说，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。这个可以解决高度塌陷，以及margin边距重叠问题

三，Flex Box

• 一种新的排版方式
• 它可以控制子级盒子的：
  • 摆放的流向
  • 摆放的顺序
  • 盒子宽高
  • 水平和垂直方向的对齐
  • 是允许折行

Flexibility

• 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
• flex-grow 有剩余空间时的伸展能力
• flex-shrink 容器空间不足时收缩的能力
• flex-basis 没有伸展或收缩时的基础长度

我的理解：我在项目中使用最多的就时flex布局，因为他简单，不用写太多多余的代码，而且满足了一些自适应的要求，方便我们去布局。