z914020826的博客

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

当我们再写自己的网页的时候，我们通常会在一个大盒子里面放若干个小盒子，想要把这若干个盒子排成一排，，倘若我们给每个小盒子设置display:inline-block；并且设置好宽高之后，理论上是会排成一排的，但是在实际中却会出现最后一个盒子被挤掉的情况。

BOX Model，所有HTML都可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。