1.在什么場景下會(huì)出現(xiàn)外邊距合并裳涛？如何合并？如何不讓相鄰元素外邊距合并众辨？給個(gè)父子外邊距合并的范例端三？
定義：簡單地說，外邊距合并指的是鹃彻，當(dāng)兩個(gè)垂直外邊距相遇時(shí)技肩，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
外邊距合并場景：
一：兄弟元素的外邊距合并;
For example：
二：父子元素外邊距合并;
For example:
如圖：負(fù)元素上邊距與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>可以在父元素上設(shè)置border或者padding;</li>
For example:
<h4>2.去除inline-block內(nèi)縫隙有哪幾種常見方法?</h4>
inline-block有內(nèi)縫隙是這樣的：
解決方法：
<ul>
<li>設(shè)置負(fù)邊距</li>
<li>在父元素里設(shè)置font-size:0;</li>
<li>將display為inline-block的元素放置在一行，此方法不適用與包含較多內(nèi)容的元素</li>
<li>使用浮動(dòng)</li>
三然痊、父容器使用overflow: auto| hidden撐開高度的原理是什么至朗？
父容器在使用overflow: auto| hidden后使其產(chǎn)生BFC，從而為float開辟出一個(gè)獨(dú)立的空間剧浸，撐開父容器的高度锹引。即：形成自己的“小宇宙”，從而把父容器撐開唆香。
四嫌变、BFC是什么？如何形成BFC躬它，有什么作用?
我的理解：BFC本質(zhì)上就是是一個(gè)元素為其內(nèi)部新生成的獨(dú)立空間腾啥，內(nèi)部的內(nèi)容全被格式化成塊級(jí)容器(注意是塊級(jí)容器，不是塊級(jí)元素)冯吓。
W3C定義：
浮動(dòng)元素和絕對(duì)定位元素倘待，非塊級(jí)盒子的會(huì)計(jì)容器（例如inline-blocks,table-cells,和table-captions），以及overflow值不為“visiable”的塊級(jí)盒子组贺，都會(huì)為他們的內(nèi)容創(chuàng)建新的BFC（塊級(jí)格式上下文）凸舵。
如何形成BFC：
<li>為元素添加float非none的屬性值
<li>為元素添加postion:absolute
<li>為元素添加display:inline-block | table-cells | table-caption
<li>為元素添加overflow:auto | hidden
作用：
<li>防止外邊距合并
<li>清除浮動(dòng)
<li>使用BFC避免文字環(huán)繞
5.浮動(dòng)導(dǎo)致的父容器高度塌陷指什么？為什么會(huì)產(chǎn)生失尖？有幾種解決方法?
當(dāng)一個(gè)父容器的高度為自適應(yīng)時(shí)啊奄，子元素浮動(dòng)會(huì)導(dǎo)致父容器高度塌陷。
How come掀潮？
因?yàn)闉樵靥砑痈?dòng)之后菇夸，會(huì)導(dǎo)致元素脫離文檔流，導(dǎo)致其內(nèi)容在父容器中抽離出來胧辽，由于父容器高度為自適應(yīng)峻仇，即其高度全靠子元素內(nèi)容撐開，子元素消失而父容器高度自然就會(huì)塌陷邑商。
栗子：
Solutions:
1.利用父元素形成BFC摄咆，從而為開辟出獨(dú)立的空間。
2.利用clear:both/left/right;清除浮動(dòng)
3.在父元素中添加偽元素：after和before，這是情況而定恶迈。
6.以下代碼每一行的作用是什么谱醇？ 為什么會(huì)產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別步做？
<li>以上兩段代碼的作用都是清除浮動(dòng)副渴，但是作用的場景不同。另外與通過父容器建立BFC的原理不同全度，它使用clear屬性去清除浮動(dòng)煮剧。after偽元素在IE8及以上才支持，所有第二段*zoom=1以防第一段代碼失去效用之后将鸵，用來防止清除浮動(dòng)失敗勉盅。
<li>第一段代買是通過在父容器clearfix設(shè)置偽元素，在父容器最后添加內(nèi)容為空的塊級(jí)元素顶掉，并使用clear:both;達(dá)到清除浮動(dòng)的目的草娜。
<li>第二段代碼的解釋是：zoom屬性是IE瀏覽器的專有屬性，它本來是用來設(shè)置或檢索對(duì)象的縮放比例痒筒，但原有屬性很少被使用宰闰，最常使用的是利用觸發(fā)IE瀏覽器的haslayou，以達(dá)到清除浮動(dòng)和外邊距合并的目的凸克。
代碼作業(yè)：
<a >代碼一</a>
<a >代碼二</a>
版權(quán)歸饑人谷peter和饑人谷所有议蟆，若有轉(zhuǎn)載闷沥，請注明來源萎战。
感謝吃瓜子觀眾：
