border

BFC

• 布局規(guī)則：
  1、內(nèi)部的Box會在垂直方向，一個接一個的放置；
  2、box垂直方向的距離有margin決定，屬于同一個BFC的兩個相鄰box的margin會發(fā)生重疊
  3、每個元素的margin box的左邊，與包含塊border box的左邊相觸，（對于從左往右的布局，否則相反）。即使存在浮動也是如此。
  4、BFC的區(qū)域不會與float box重疊。
  5、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
  6、計算BFC的高度時，浮動元素也參與計算。
• 哪些元素會生成BFC：
  1、根元素
  2、float屬性不為none
  3、position為absolute或fixed
  4、display為inline-block，table-cell，table-caption，flex，inline-flex
  5、overflow不為visible