### 1、CSS布局的基本单位：Box Box是CSS布局的对象和基本单位，简单点说，就是一个页面是由很多Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box，会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 - Block-level box：display属性为block，list-item和table的元素，会生成block-level box，并且参与block formatting context； - inline-level box：display属性为inline，inline-block和inline-table的元素，会生成inline-level box，并且参与inline formatting context。 ### 2、BFC的定义 BFC（Block Formatting Context）直译为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level Box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相关。 ### 3、BFC布局规则 - 内部的Box会在垂直方向，一个接一个地放置； - Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠； - 每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此； - BFC的区域不会与float box重叠； - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此； - 计算BFC的高度时，浮动元素也参与计算。 ### 4、哪些元素会生成BFC - 根元素； - float属性不为none； - position为absolute或fixed； - display为inline-block，table-cell，table-caption，flex，inline-flex； - overflow不为visible。