一、在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

兩個margin之間是否有界限，沒有界限、浮動、overflow就會融合

消除相鄰元素外邊距合并原理是形成自己的fbc,不在同一個fbc下，就不會相互干擾.png

按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發(fā)生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內(nèi)容，padding等)就會發(fā)生margin重疊。 因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會和父元素的margin發(fā)生重疊

父子margin之間沒有border,padding(父親的,孩子的不在之間）阻隔出現(xiàn)外邊距合并.png

二、去除inline-block內(nèi)縫隙有哪幾種常見方法?

1. 把inline-block元素寫一起，不要換行。
2. jianxi
3. margin-left：-4px；取消第一個的margin-left
4. 用浮動，避免用inlineblock
5. 父元素設(shè)置font-size:0
   inline-block兼容*display：inline；

三、父容器使用overflow: auto| hidden撐開高度的原理是什么？

觸發(fā)形成BFC（BFC的全稱是 [Block Format Content]，有三個特性
BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊；BFC不會重疊浮動元素；BFC可以包含浮動）

四、BFC是什么？如何形成BFC，有什么作用?

BFC：塊級格式化上下文，它是指一個獨(dú)立的塊級渲染區(qū)域，該區(qū)域擁有一套渲染規(guī)則來約束塊級盒子的布局，且與區(qū)域外部無關(guān)
阻止外邊距合并，清浮動等和IE的hasLayout類似
課件
[相關(guān)博客博客：http://www.cnblogs.com/dojo-lzz/p/3999013.html]

五、浮動導(dǎo)致的父容器高度塌陷指什么？為什么會產(chǎn)生？有幾種解決方法

子元素脫離文檔流。父元素沒設(shè)置高度，包不住子元素。
A 給父元素加高度
B 給父元素加浮動
C 給父元素加一個空的div，清除兩個方向的浮動
D 給父元素加overflow(通過給容器添加下列任意一個樣式即可形成BFC overflow;
display: flex;float: left;display: table)
E .clearfix:after{ content: ''; display: block; clear: both;}.clearfix{ *zoom: 1;}
產(chǎn)生原因：計算容器元素高度的時候，浮動元素相當(dāng)于脫離了文檔流

六、以下代碼每一行的作用是什么？ 為什么會產(chǎn)生作用？ 和BFC撐開空間有什么區(qū)別？

.clearfix:after{ content: ''; display: block; clear: both;}.clearfix{ *zoom: 1;}

在clearfix最后加一個空的元素，轉(zhuǎn)化為塊狀元素，清楚元素周圍的浮動。
zoom：1在IE67下生效，觸發(fā)haslayaout.

單行溢出隱藏

white space:nowrap;
overflow:hidden;
text-overflow:ellipsis；

設(shè)置height：100%的整頁大圖

從本身設(shè)置到body,html:height:100%