1.浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?
（1）浮動(dòng)元素會(huì)脫離正常的文檔流，按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素（或父元素）顯示
（2）浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊，但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊
（3）浮動(dòng)元素后面的內(nèi)聯(lián)元素會(huì)向此浮動(dòng)元素的外邊距靠齊
對(duì)父容器的影響：
對(duì)于其父元素來(lái)說(shuō)，元素浮動(dòng)之后，它脫離當(dāng)前正常的文檔流，所以它也無(wú)法撐開(kāi)其父元素，造成父元素的塌陷
對(duì)其他浮動(dòng)元素的影響：
（1）同一個(gè)方向的浮動(dòng)元素：當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過(guò)程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)，它會(huì)緊跟在它們后面
（2）反方向的浮動(dòng)元素：互不影響，位于同一條水平線上，當(dāng)空間不夠時(shí)會(huì)被擠下
對(duì)普通元素的影響：
（1）對(duì)于其父元素來(lái)說(shuō)，元素浮動(dòng)之后，它脫離當(dāng)前正常的文檔流，所以它也無(wú)法撐開(kāi)其父元素，造成父元素的塌陷。
（2）如果兄弟元素為內(nèi)聯(lián)元素，則元素會(huì)環(huán)繞浮動(dòng)元素排列。
對(duì)文字的影響：環(huán)繞浮動(dòng)元素。
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
清除浮動(dòng)指清除掉元素的float屬性，消除浮動(dòng)元素對(duì)其他元素的影響（如父元素高度坍塌）
第一種：添加新的元素，應(yīng)用clear：both
HTML：
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="clear"></div>
</div>
CSS：
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
第二種：給父級(jí)元素定義overflow
HTML：
<div class="outer over-flow"> //這里添加了一個(gè)class
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS：
.over-flow{
overflow: auto; //也可以設(shè)置hidden
zoom: 1; //zoom: 1; 處理兼容性問(wèn)題
}
第三種：after 方法：（注意：作用于浮動(dòng)元素的父親）
先說(shuō)原理：
這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，他是利用:after和:before來(lái)在元素內(nèi)部插入兩個(gè)元素塊，從面達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽，而outer利用其偽類clear:after在元素內(nèi)部增加一個(gè)類似于div.clear的效果。下面來(lái)看看其具體的使用方法：
HTML:
<div class="outer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
CSS:
.outer {zoom:1;}
.outer :after {
clear:both;
content:'.';
display:block;
width: 0;
height: 0;
visibility:hidden;
}
其中clear:both;指清除所有浮動(dòng)；content: '.'; display:block;對(duì)于FF/chrome/opera/IE8不能缺少，其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清楚浮動(dòng)。
下一標(biāo)簽直接清浮動(dòng)兄弟標(biāo)簽浮動(dòng)時(shí)，在下一標(biāo)簽的屬性中直接寫入清除clear:both;這樣就可以清除以上標(biāo)簽的浮動(dòng)而不用加入空標(biāo)簽來(lái)清除浮動(dòng)。
*當(dāng)一個(gè)內(nèi)層元素是浮動(dòng)的時(shí)候，如果沒(méi)有關(guān)閉浮動(dòng)時(shí)，其父元素也就不會(huì)再包含這個(gè)浮動(dòng)的內(nèi)層元素，因?yàn)榇藭r(shí)浮動(dòng)元素已經(jīng)脫離了文檔流。也就是為什么外層不能被撐開(kāi)了！
3.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場(chǎng)景是什么？
普通流：
static:這是默認(rèn)的定位方式。
相對(duì)定位：
relative：參考點(diǎn)是該元素本身，它是相對(duì)于它原來(lái)的位置發(fā)生變化。如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在他所在的位置上，然后可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于它自己移動(dòng)，在使用相對(duì)定位時(shí)，無(wú)論元素是否移動(dòng)，元素在文檔流中占據(jù)原來(lái)空間，只是表現(xiàn)出來(lái)的位置會(huì)改變。
絕對(duì)定位：
absolute：它的位置是相對(duì)于距離最近的非static祖先元素位置決定的。如果元素沒(méi)有已定位的祖先元素，那么他的位置就相對(duì)于初始包含塊html來(lái)定位。
fixed：固定定位是絕對(duì)定位的一種，固定定位的元素也不包含在普通文檔流中，它的參考點(diǎn)是視口。
4.z-index 有什么作用? 如何使用?
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。 當(dāng)元素的position屬性為absolute,relative或fixed。
z-index越高，元素位置越靠上。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative;只相對(duì)自己原本位置發(fā)生偏移，不影響其它普通流中元素的位置。負(fù)margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說(shuō)明
BFC(Block Formatting Content)塊格式化上下文。
生成BFC:
1.float為 left|right
2.overflow為 hidden|auto|scroll
3.display為 table-cell|table-caption|inline-block
4.position為 absolute|fixed
作用:
- 可以包含浮動(dòng)元素
- 可以阻止外邊距折疊
- 可以防止元素被浮動(dòng)元素覆蓋
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
（1）在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？
外邊距合并:兩個(gè)在普通文檔流中相鄰的元素外邊距相遇的時(shí)候發(fā)生合并。這個(gè)相鄰可以是父子關(guān)系相鄰，兄弟關(guān)系相鄰，或者一個(gè)元素內(nèi)部沒(méi)有東西，自身的上下邊距相遇時(shí)都會(huì)發(fā)生外邊距合并。
合并的結(jié)果： 兩個(gè)外邊距都是正數(shù)，取兩者之中的較大者；兩個(gè)外邊距都是負(fù)數(shù)，取兩者之間絕對(duì)值較大者；當(dāng)兩個(gè)外邊距一正一負(fù)時(shí)，取兩者的和。
（2）如何不讓相鄰元素外邊距合并？
若不想讓相鄰元素合并，設(shè)置浮動(dòng)，display：inline-block或使其父元素均形成BFC可防止邊距合并（如overflow:hidden）。
舉例：
子元素box1的外邊距與父元素box的外邊距合并，box與ct的外邊距合并，box1與ct的外邊距合并。
