BOX
CSS布局的基本單位, 一個頁面是由很多個 Box 組成的肚医，元素的類型和 display 屬性決定了這個 Box 的類型。不同類型的 Box向瓷，會參與不同的 Formatting Context肠套。
Block level的box會參與形成BFC，比如display值為block猖任，table的元素你稚。
Inline level的box會參與形成IFC，比如display值為inline朱躺，inline-table刁赖，inline-block的元素。
FC
FC(formatting context) 格式化上下文长搀，它是頁面中的一塊渲染區(qū)域宇弛，有一套渲染規(guī)則，決定了其子元素如何布局源请，以及和其他元素之間的關系和作用
BFC
BFC為"塊級格式化上下文"枪芒。它是一個獨立的渲染區(qū)域彻况，只有Block-level box參與， 它規(guī)定了內部的Block-level Box如何布局舅踪，并且與這個區(qū)域外部毫不相干纽甘。
BFC怎么產(chǎn)生
【1】根元素，即HTML元素
【2】float的值不為none
【3】overflow的值不為visible
【4】display的值為inline-block抽碌、table-cell悍赢、table-caption
【5】position的值為absolute或fixed
BFC布局規(guī)則：
【1】.內部的Box會在垂直方向，一個接一個地放置货徙。
【2】.Box垂直方向的距離由margin決定左权。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
【3】.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸 (對于從左往右的格式化破婆，否則相反)涮总。即使存在浮動也是如此。
【4】計算BFC的高度時祷舀，浮動元素也參與計算
【5】BFC的區(qū)域不會與float box重疊瀑梗。
【6】BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素裳扯。反之也如此抛丽。
BFC有哪些作用：
- 自適應兩欄布局
- 可以阻止元素被浮動元素覆蓋
- 可以包含浮動元素——清除內部浮動
- 分屬于不同的BFC時可以阻止margin重疊
BFC布局規(guī)則1：內部的Box會在垂直方向，一個接一個地放置饰豺。
BFC布局規(guī)則2：Box垂直方向的距離由margin決定亿鲜。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
演示中css屬性設置：上面的box：margin-bottom: 100px;下面的box：margin-top: 100px;（他們是同一側的margin冤吨，所以會發(fā)生margin重疊的情況蒿柳，兩個div的距離實際上只有100px。）
應用：阻止margin重疊
當兩個相鄰塊級子元素分屬于不同的BFC時可以阻止margin重疊
操作方法：給其中一個div外面包一個div漩蟆，然后通過觸發(fā)外面這個div的BFC垒探，就可以阻止這兩個div的margin重疊
BFC布局規(guī)則3：每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化怠李，否則相反)圾叼。即使存在浮動也是如此。
解析：給這兩個子div加浮動捺癞，浮動的結果夷蚊，如果沒有清除浮動的話，父div不會將下面兩個div包裹髓介，但還是在父div的范圍之內惕鼓，左浮是子div的左邊接觸父div的borderbox的左邊，右浮是子div接觸父div的borderbox右邊唐础，除非設置margin來撐開距離呜笑，否則一直是這個規(guī)則夫否。
BFC布局規(guī)則5：計算BFC的高度時，浮動元素也參與計算
應用：可以包含浮動元素——清除內部浮動
可以包含浮動元素——清除內部浮動
給父divpar加上 overflow: hidden;
清除浮動原理：觸發(fā)父div的BFC屬性叫胁，使下面的子div都處在父div的同一個BFC區(qū)域之內，計算父div的高度時汞幢，浮動元素也參與計算驼鹅，此時已成功清除浮動
BFC布局規(guī)則4：BFC的區(qū)域不會與float box重疊
div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>
<!--下面是css代碼-->
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
overflow: hidden;//觸發(fā)main盒子的BFC
background: #fcc;
}
.text{
width: 500px;
}
上面aside盒子有一個浮動屬性，覆蓋了main盒子的內容森篷，main盒子沒有清除aside盒子的浮動输钩。只做了一個動作，就是觸發(fā)自身的BFC仲智，然后就不再被aside盒子覆蓋了买乃。所以：BFC的區(qū)域不會與float box重疊。
應用：阻止元素被浮動元素覆蓋 自適應兩欄布局钓辆。
還是上面的代碼剪验，此時BFC的區(qū)域不會與float box重疊，因此會根據(jù)包含塊（父div）的寬度前联，和aside的寬度功戚，自適應寬度。
BFC布局規(guī)則6：BFC就是頁面上的一個隔離的獨立容器似嗤，容器里面的子元素不會影響到外面的元素
實際上就是兩個BFC之間不會相互影響啸臀，理解為不是一個文檔流
BFC 與 Layout
IE 作為瀏覽器中的奇葩，當然不可能按部就班的支持 BFC 標準烁落，于是乎 IE 中有了 Layout 這個東西乘粒。Layout 和 BFC 基本是等價的，為了處理 IE 的兼容性伤塌，在需要觸發(fā) BFC 時灯萍，我們除了需要用觸發(fā)條件中的 CSS 屬性來觸發(fā) BFC，還需要針對 IE 瀏覽器使用 zoom: 1 來觸發(fā) IE 瀏覽器的 Layout寸谜。
