### 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。