Box感昼，css布局的基本單位
Box 是 CSS 布局的對象和基本單位， 直觀點來說罐脊，就是一個頁面是由很多個 Box 組成的定嗓。元素的類型和 display 屬性，決定了這個 Box 的類型萍桌。 不同類型的 Box宵溅， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內(nèi)的元素會以不同的方式渲染上炎。
- block-level恃逻，display 屬性為 block, list-item, table 的元素，會生成 block-level box。
- inline-level寇损，display 屬性為 inline, inline-block, inline-table 的元素凸郑，會生成 inline-level box。
- run-in矛市。
Formatting context
Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念芙沥。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則浊吏，它決定了其子元素將如何定位而昨，以及和其他元素的關(guān)系和相互作用。
BFC 定義
BFC(Block formatting context)直譯為"塊級格式化上下文"卿捎。它是一個獨(dú)立的渲染區(qū)域配紫，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局午阵，并且與這個區(qū)域外部毫不相干躺孝。
BFC布局規(guī)則：
- 內(nèi)部的Box會在垂直方向，一個接一個地放置底桂。
- Box垂直方向的距離由margin決定植袍。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
- 每個元素的margin box的左邊籽懦， 與包含塊border box的左邊相接觸(對于從左往右的格式化于个，否則相反)。即使存在浮動也是如此暮顺。
- BFC的區(qū)域不會與float box重疊厅篓。
- BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素捶码。反之也如此羽氮。
- 計算BFC的高度時，浮動元素也參與計算惫恼。
哪些元素會生成BFC?
- 根元素
- float屬性不為none
- position為absolute或fixed
- display為inline-block, table-cell, table-caption, flex, inline-flex
- overflow不為visible
