什么也不會發(fā)生謝謝

原文鏈接

BFC（Block Formatting Context）直譯為“塊級格式化范圍”。是 W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用
當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。一個(gè)環(huán)境中的元素不會影響到其它環(huán)境中的布局。比如浮動(dòng)元素會形成BFC，浮動(dòng)元素內(nèi)部子元素的主要受該浮動(dòng)元素影響，兩個(gè)浮動(dòng)元素之間是互不影響的。這里有點(diǎn)類似一個(gè)BFC就是一個(gè)獨(dú)立的行政單位的意思。
也可以說BFC就是一個(gè)作用范圍?？梢园阉斫獬墒且粋€(gè)獨(dú)立的容器，并且這個(gè)容器的里box的布局，與這個(gè)容器外的毫不相干

• 怎么形成BFC

  1. float的值不能為none
  2. overflow的值不能為visible
  3. display的值為table-cell, table-caption, inline-block中的任何一個(gè)
  4. position的值不為relative和static

• BFC的約束規(guī)則

  1. 內(nèi)部的Box會在垂直方向上一個(gè)接一個(gè)的放置
  2. 垂直方向的距離有margin決定(屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會發(fā) 生重疊，與方向無關(guān))
  3. 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此
  4. BFC的區(qū)域不會與float的元素區(qū)域重疊
  5. 計(jì)算BFC的高度時(shí)，浮動(dòng)子元素也參與計(jì)算
  6. BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會影響到外面元素，反之亦然