前端BFC和IFC机制

BFC（Block Formatting Context，块级格式化上下文）

BFC就像一个有魔法的盒子，它可以把里面的东西（其他盒子）整理得整整齐齐，并且有一些特别的规则：

  1. 盒子不会跑出去：魔法盒子里的东西不会跑到外面去，外面的东西也不会跑进来。
  2. 盒子会变高：魔法盒子会自动变高，以便把所有东西都装进去，哪怕是浮起来的东西（浮动元素）。
  3. 盒子们紧紧靠在一起：魔法盒子里的东西会紧紧地排列在一起，不会有多余的空隙。

什么时候会有魔法盒子（BFC）呢？

  • 当我们给盒子加上float属性时，它会变成魔法盒子。
  • 当我们给盒子加上position: absolute或fixed属性时，它也会变成魔法盒子。
  • 当我们给盒子加上display: inline-block、table等属性时，它会变成魔法盒子。
  • 当我们给盒子加上overflow属性，比如hidden，它也会变成魔法盒子。

IFC（Inline Formatting Context，内联格式化上下文）

IFC就像我们写字时的一行行文字，这些文字（内联元素）会整齐地排在一起。

  1. 一行排开：IFC里的东西会一个接一个地排成一行。
  2. 行高决定高度：这些东西的高度是由行高（line-height）决定的。
  3. 可以换行：如果一行放不下了，它们会自动换到下一行。

什么时候会有IFC呢？

  • 当我们用<span>或<a>这些内联标签时，它们会自动变成IFC。
  • 当我们把盒子的display属性设置为inline或inline-block时，它们也会变成IFC。

举个例子

BFC就像一个整理箱，你可以把很多玩具放进去，这个箱子会帮你把玩具整理得很整齐，玩具不会跑到箱子外面去，箱子也会变高来装下所有的玩具。

IFC就像我们排队写字，每个字都会排成一行，如果一行写满了，就会自动换到下一行。