1.在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例？
定義：簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
外邊距合并場景：
一：兄弟元素的外邊距合并;
For example：
二：父子元素外邊距合并;
For example:
如圖：負元素上邊距與item1上邊距合并margin:30px，下邊距與item2下邊距合并margin:10px;。
解決方案：
一：兄弟元素的外邊距合并;
<li>使用float;</li>
For example:
<li>使用inline-block;</li>
For example:
<li>為相鄰的子元素生成bfc</li>
For example:
</br>
二父子元素的外邊距合并的解決方案
</br>
<li>可以在父元素上設置border或者padding;</li>
For example:
<h4>2.去除inline-block內(nèi)縫隙有哪幾種常見方法?</h4>
inline-block有內(nèi)縫隙是這樣的：
解決方法：
<ul>
<li>設置負邊距</li>
<li>在父元素里設置font-size:0;</li>
<li>將display為inline-block的元素放置在一行，此方法不適用與包含較多內(nèi)容的元素</li>
<li>使用浮動</li>
三、父容器使用overflow: auto| hidden撐開高度的原理是什么？
父容器在使用overflow: auto| hidden后使其產(chǎn)生BFC，從而為float開辟出一個獨立的空間，撐開父容器的高度。即：形成自己的“小宇宙”，從而把父容器撐開。
四、BFC是什么？如何形成BFC，有什么作用?
我的理解：BFC本質上就是是一個元素為其內(nèi)部新生成的獨立空間，內(nèi)部的內(nèi)容全被格式化成塊級容器(注意是塊級容器，不是塊級元素)。
W3C定義：
浮動元素和絕對定位元素，非塊級盒子的會計容器（例如inline-blocks,table-cells,和table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）。
如何形成BFC：
<li>為元素添加float非none的屬性值
<li>為元素添加postion:absolute
<li>為元素添加display:inline-block | table-cells | table-caption
<li>為元素添加overflow:auto | hidden
作用：
<li>防止外邊距合并
<li>清除浮動
<li>使用BFC避免文字環(huán)繞
5.浮動導致的父容器高度塌陷指什么？為什么會產(chǎn)生？有幾種解決方法?
當一個父容器的高度為自適應時，子元素浮動會導致父容器高度塌陷。
How come？
因為為元素添加浮動之后，會導致元素脫離文檔流，導致其內(nèi)容在父容器中抽離出來，由于父容器高度為自適應，即其高度全靠子元素內(nèi)容撐開，子元素消失而父容器高度自然就會塌陷。
栗子：
Solutions:
1.利用父元素形成BFC，從而為開辟出獨立的空間。
2.利用clear:both/left/right;清除浮動
3.在父元素中添加偽元素：after和before，這是情況而定。
6.以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別？
<li>以上兩段代碼的作用都是清除浮動，但是作用的場景不同。另外與通過父容器建立BFC的原理不同，它使用clear屬性去清除浮動。after偽元素在IE8及以上才支持，所有第二段*zoom=1以防第一段代碼失去效用之后，用來防止清除浮動失敗。
<li>第一段代買是通過在父容器clearfix設置偽元素，在父容器最后添加內(nèi)容為空的塊級元素，并使用clear:both;達到清除浮動的目的。
<li>第二段代碼的解釋是：zoom屬性是IE瀏覽器的專有屬性，它本來是用來設置或檢索對象的縮放比例，但原有屬性很少被使用，最常使用的是利用觸發(fā)IE瀏覽器的haslayou，以達到清除浮動和外邊距合并的目的。
代碼作業(yè)：
<a >代碼一</a>
<a >代碼二</a>
版權歸饑人谷peter和饑人谷所有，若有轉載，請注明來源。
感謝吃瓜子觀眾：
