float即為浮動(dòng)艾杏，在CSS中的作用是使元素脫離正常的文檔流并使其移動(dòng)到其父元素的“最左邊”或“最右邊”杰标。下面解釋下這個(gè)定義中的幾個(gè)名詞的概念：
文檔流：在html中文檔流即為元素從上至下排列的順序。
脫離文檔流：元素從正常的排列順序被抽離譬淳。
最左邊/最右邊：上述的移動(dòng)到父元素最左和最右是指元素往左或往右移動(dòng)直到碰到另一個(gè)浮動(dòng)元素或父元素內(nèi)容區(qū)的邊界（不包括padding）戚啥。
參考: [https://www.w3cplus.com/css/float.html]
1.浮動(dòng)元素有什么特征年叮？對(duì)父容器、其他浮動(dòng)元素纬纪、普通元素蚓再、文字分別有什么影響?
浮動(dòng)元素的特征：
浮動(dòng)元素會(huì)脫離正常的文檔流，按照其外邊距指定的位置相對(duì)于它的上一個(gè)塊級(jí)元素（或父元素）顯示包各。
浮動(dòng)元素后面的塊級(jí)元素的內(nèi)容會(huì)向此浮動(dòng)元素的外邊距靠齊摘仅，但是邊框和背景卻忽略浮動(dòng)元素而向上一個(gè)任意非浮動(dòng)元素靠齊。
浮動(dòng)元素后面的內(nèi)聯(lián)元素會(huì)向此浮動(dòng)元素的外邊距靠齊问畅。
對(duì)父元素的影響：對(duì)于其父元素來(lái)說(shuō)娃属，元素浮動(dòng)之后六荒，它脫離當(dāng)前正常的文檔流，所以它也無(wú)法撐開其父元素矾端，造成父元素的塌陷掏击。
對(duì)其他浮動(dòng)元素的影響：同一個(gè)方向的浮動(dòng)元素：當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過(guò)程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)，它會(huì)緊跟在它們后面秩铆。
反方向的浮動(dòng)元素：互不影響砚亭，位于同一條水平線上，當(dāng)空間不夠時(shí)會(huì)被擠下豺旬。
對(duì)普通元素的影響：如果兄弟元素為塊級(jí)元素钠惩，該元素會(huì)忽視浮動(dòng)元素的而占據(jù)它的位置，并且元素會(huì)處在浮動(dòng)元素的下層（并且無(wú)法通過(guò)z-index屬性改變他們的層疊位置）族阅，但它的內(nèi)部文字和其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素篓跛。
如果如果兄弟元素為內(nèi)聯(lián)元素，則元素會(huì)環(huán)繞浮動(dòng)元素排列坦刀。
對(duì)文字的影響：文字會(huì)環(huán)繞浮動(dòng)元素排列愧沟。
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法。
清楚浮動(dòng)指解決浮動(dòng)父容器高度塌陷問(wèn)題鲤遥。
清除浮動(dòng)的方法可以分成兩類：
一是利用 clear 屬性沐寺，包括在浮動(dòng)元素末尾添加一個(gè)帶有 clear: both 屬性的空 div 來(lái)閉合元素，其實(shí)利用 :after 偽元素的方法也是在元素末尾添加一個(gè)內(nèi)容為一個(gè)點(diǎn)并帶有 clear: both 屬性的元素實(shí)現(xiàn)的盖奈。
二是觸發(fā)浮動(dòng)元素父元素的 BFC (Block Formatting Contexts, 塊級(jí)格式化上下文)混坞，使到該父元素可以包含浮動(dòng)元素.
解決方法：
1.使用帶clear屬性的空元素，在浮動(dòng)元素后使用一個(gè)空元素如<div class="clear"></div>钢坦，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動(dòng)究孕。
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
<div style="clear:both;"></div>
</div>
2.使用CSS的float，overflow爹凹，display厨诸，position屬性。float為 left|right禾酱，overflow為hidden|auto|scroll微酬，display為 table-cell|table-caption|inline-block，position為 absolute|fixed颤陶，例如為父元素設(shè)置容器寬高或設(shè)置 zoom:1颗管。在添加overflow屬性后，浮動(dòng)元素又回到了容器層滓走，把容器高度撐起忙上，達(dá)到了清理浮動(dòng)的效果。
<div style="border: solid 5px #0e0; width:300px;overflow:hidden;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>
3.使用CSS的:after偽元素闲坎，給浮動(dòng)元素的容器添加一個(gè)clearfix的class疫粥，然后給這個(gè)class添加一個(gè):after偽元素實(shí)現(xiàn)元素末尾添加一個(gè)看不見的塊元素清理浮動(dòng)茬斧。
/方法1/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
/方法2/
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
3.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的梗逮，參考點(diǎn)是什么项秉，使用場(chǎng)景是什么？
CSS有三種定位方式：absolute定位慷彤，relative定位和fixed定位娄蔼。
absolute定位：1.通過(guò)left/top/right/buttom，以具有position屬性的父元素為參考進(jìn)行定位底哗。2.absolute偏移的參考點(diǎn)首先是父元素岁诉，然后檢查該父元素是否具有position屬性，若具有position屬性跋选，則以該父元素為參考點(diǎn)進(jìn)行偏移涕癣，若不具有則繼續(xù)往上一級(jí)找，直到body標(biāo)簽為止前标。3.使用場(chǎng)景是需要相對(duì)于父元素或者body進(jìn)行定位坠韩。
relative定位：1.通過(guò)left/top/right/buttom，以自己的位置進(jìn)行定位炼列。2.relative偏移的參考點(diǎn)是自身位置只搁，是拿偏移前的位置與偏移后的位置進(jìn)行比較，比如top10px俭尖，表現(xiàn)出來(lái)的其實(shí)是向下移動(dòng)10px氢惋。3.使用場(chǎng)景是偏移前的位置需要保留，不脫離文檔流稽犁。
fixed定位：1.通過(guò)left/top/right/buttom明肮，以瀏覽器窗口進(jìn)行定位。2.fixed偏移的參考點(diǎn)是瀏覽器窗口缭付。3.使用場(chǎng)景是固定于瀏覽器的某個(gè)位置不動(dòng)。
4.z-index 有什么作用? 如何使用?
z-index 屬性設(shè)置元素的堆疊順序循未。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面陷猫。
注釋：元素可擁有負(fù)的 z-index 屬性值。Z-index 僅能在定位元素上奏效（例如 position:absolute;）的妖！
值 | 描述
|````|`````|
auto | 默認(rèn)绣檬。堆疊順序與父元素相等。
number | 設(shè)置元素的堆疊順序嫂粟。
inherit | 規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值娇未。
例如：
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別。
- position:relative發(fā)生偏移后星虹，在文檔流中的位置不變零抬。
- 負(fù)margin會(huì)改變?cè)卦谖臋n流中的位置镊讼。
6.BFC 是什么？如何生成 BFC平夜？BFC 有什么作用蝶棋？舉例說(shuō)明
BFC的全稱是 Block Format Content塊級(jí)格式化上下文。它是一個(gè)獨(dú)立的渲染區(qū)域忽妒，只有Block-level box參與玩裙， 它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個(gè)區(qū)域外部毫不相干段直。
生成方法：可以對(duì)父容器添加這些屬性來(lái)生成BFC：
float為 left|right
overflow為 hidden|auto|scroll
display為 table-cell|table-caption|inline-block
position為 absolute|fixed
作用：1. 自適應(yīng)兩欄布局吃溅；2.清除內(nèi)部浮動(dòng)；3. 防止垂直 margin 重疊鸯檬。
例如2:
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
</div>```
7.在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并决侈？如何合并？如何不讓相鄰元素外邊距合并京闰？給個(gè)父子外邊距合并的范例颜及。
兄弟元素合并：當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并蹂楣。
父子間合并：當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開）俏站，它們的上和/或下外邊距也會(huì)發(fā)生合并。
空元素：假設(shè)有一個(gè)空元素痊土，它有外邊距肄扎，但是沒(méi)有邊框或填充。在這種情況下赁酝，上外邊距與下外邊距就碰到了一起犯祠，它們會(huì)發(fā)生合并
如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：
兩個(gè)相鄰的外邊距都是正數(shù)時(shí)酌呆，合并結(jié)果是它們兩者之間較大的值衡载。
兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，合并結(jié)果是兩者絕對(duì)值的較大值隙袁。
兩個(gè)外邊距一正一負(fù)時(shí)痰娱，合并結(jié)果是兩者的相加的和。
防止合并：
對(duì)于兄弟元素：設(shè)置浮動(dòng)菩收，display：inline-block或使其父元素均形成BFC可防止邊距合并（如overflow:hidden）
對(duì)于父子間的元素：可以給父元素設(shè)置border或padding屬性來(lái)防止合并梨睁。
對(duì)于空元素：設(shè)置border或padding屬性或overflow：hidden等（形成BFC）來(lái)防止合并。
[代碼1](http://js.jirengu.com/hihibiwexu)
[代碼2](http://js.jirengu.com/luyozovoma)
[代碼3](http://js.jirengu.com/qiciqizice)
[代碼4](http://js.jirengu.com/nozivosozi)