BFC

• 形成（4種）

  1. float
  2. absolutely positioned elements：

  positione: absolute, fixed;
  

  3. block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes,

  display: inline-blocks, table-cells, table-captions;
  

  4.block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

  overflow: auto, hidden, scroll
  

• 同一個BFC中的元素遵守下列規(guī)則

1. 從上到下排列
2. 垂直外邊距合并
3. 重疊浮動元素

• BFC之間的規(guī)則

1. BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊

• 按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。
• 因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊

2. BFC不會重疊浮動元素
3. BFC可以包含浮動

定位機制

• CSS有三種基本的定位機制：普通流，浮動，絕對定位(absolute,fixed)

1. 普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，這也是我們最常見的方式，其中position: static與position:relative屬于普通流的定位方式
2. 浮動定位
3. 絕對定位包括 absolute和 fixed

2和3 元素都會脫離文檔的普通流
注意：position:relative 屬于普通流，元素位置會發(fā)生偏移，但是并不會影響其他元素的布局

絕對定位寬度

• 絕對定位寬度是收縮的，如果想撐滿父容器，可以設置 width: 100%

布局

• 消除兩個按鈕之間的空隙
  1. 讓標簽之間沒有空隙
  2. 先display為inline-block，再父元素font-size設置為0，子元素不為0即可
  3. 用浮動，即先用一個塊級元素包裹住按鈕。然后讓兩個按鈕浮動，清除浮動后再讓新添加的塊級元素居中

  1和2不要用，只在面試時候回答即可。布局中盡量不用inline-block（除非是inline-block的元素是獨一無二的，沒有兄弟）

flex

• 這可能有些容易混淆，但align-content決定行之間的間隔，而align-items決定元素整體在容器的什么位置。只有一行的時候align-content沒有任何效果