1. 浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?

文檔流：在html中文檔流即為元素從上至下排列的順序。
脫離文檔流：元素從正常的排列順序被抽離,讓元素脫離文檔流的方法有：浮動(dòng)和定位。
最左邊/最右邊：上述的移動(dòng)到父元素最左和最右是指元素往左或往右移動(dòng)直到碰到另一個(gè)浮動(dòng)元素或父元素內(nèi)容區(qū)的邊界（不包括padding）

浮動(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)元素的外邊距靠齊

float造成的影響

1. 對(duì)其父元素的影響

對(duì)于其父元素來(lái)說(shuō)，元素浮動(dòng)之后，它脫離當(dāng)前正常的文檔流，所以它也無(wú)法撐開(kāi)其父元素，造成父元素的塌陷

2. 對(duì)其兄弟元素（非浮動(dòng)）的影響

該元素會(huì)忽視浮動(dòng)元素的而占據(jù)它的位置，并且元素會(huì)處在浮動(dòng)元素的下層（并且無(wú)法通過(guò)z-index屬性改變他們的層疊位置），但它的內(nèi)部文字和其他行內(nèi)元素都會(huì)環(huán)繞浮動(dòng)元素

3. 對(duì)兄弟元素為內(nèi)聯(lián)元素的影響

該元素會(huì)環(huán)繞浮動(dòng)元素排列。

4. 對(duì)其兄弟元素（浮動(dòng)）的影響

當(dāng)一個(gè)浮動(dòng)元素在浮動(dòng)過(guò)程中碰到同一個(gè)方向的浮動(dòng)元素時(shí)，它會(huì)緊跟在它們后面
反方向時(shí)，在同一條水平線上，相互不影響。當(dāng)位置不夠時(shí)后寫(xiě)的元素另起一行

5. float對(duì)自身元素的影響

float對(duì)象將被視作塊對(duì)象(block-level)，即display屬性等于block。

6. float對(duì)子元素的影響

我們知道當(dāng)一個(gè)元素浮動(dòng)時(shí)，在沒(méi)有清楚浮動(dòng)的情況下，它無(wú)法撐開(kāi)其父元素，但它可以讓自己的浮動(dòng)子元素?fù)伍_(kāi)它自身，并且在沒(méi)有定義具體寬度情況下，使自身的寬度從100%變?yōu)樽赃m應(yīng)（浮動(dòng)元素display:block）。其高度和寬度均為浮動(dòng)元素高度和非浮動(dòng)元素高度之間的最大值。

2. 清除浮動(dòng)指什么? 如何清除浮動(dòng)?

清除浮動(dòng)并不是清除浮動(dòng)的特性，而是清除浮動(dòng)帶來(lái)的影響

1. 添加額外標(biāo)簽

通過(guò)在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽例如 <div style=”clear:both”></div>，其他標(biāo)簽br等亦可
    <div class="warp" id="float1">
       <h2>1）添加額外標(biāo)簽</h2>
      <div class="main left">.main{float:left;}</div>
      <div class="side left">.side{float:right;}</div>
      <div style="clear:both;"></div>
    </div>
    <div class="footer">.footer</div>

優(yōu)點(diǎn)：通俗易懂，容易掌握
缺點(diǎn)：可以想象通過(guò)此方法，會(huì)添加多少無(wú)意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離，在后期維護(hù)中將是噩夢(mèng)，這是堅(jiān)決不能忍受的.

2. 父元素設(shè)置 overflow：hidden

    通過(guò)設(shè)置父元素overflow值設(shè)置為hidden；在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1；
    <div class="warp" id="float3"  style="overflow:hidden; *zoom:1;">
        <h2>3)父元素設(shè)置 overflow </h2>
        <div class="main left">.main{float:left;}</div>
        <div class="side left">.side{float:right;}</div>
        </div>
    <div class="footer">.footer</div>

優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題，代碼量極少
缺點(diǎn)：內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無(wú)法顯示需要溢出的元素；

3. 父元素也設(shè)置浮動(dòng)

優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題，代碼量極少
缺點(diǎn)：使得與父元素相鄰的元素的布局會(huì)受到影響，不可能一直浮動(dòng)到body，不推薦使用

4. 使用:after 偽元素

    利用: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的效果。
    .outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
    .outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/

3. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么？

static：靜態(tài)定位是position的默認(rèn)值，元素框正常生成，也就是沒(méi)有定位時(shí)的正常顯示。

relative：相對(duì)定位
用法一：元素相對(duì)自身的原位置偏移某個(gè)距離，但是原本的空間依舊保留，表現(xiàn)為空白。
用法二：把一個(gè)元素設(shè)置為position: relative; 可以使該元素的子元素相對(duì)該元素絕對(duì)定位。

absolute：絕對(duì)定位
元素從文檔流刪除，并相對(duì)于包含塊定位。元素在原本的空間關(guān)閉。元素定位后生成一個(gè)塊級(jí)框，不論它原來(lái)是行內(nèi)元素還是塊級(jí)元素。
包含塊：最近的position值不是static的祖先元素(塊級(jí)或行內(nèi))，一般會(huì)指定一個(gè)元素作為絕對(duì)定位元素的包含塊，將其position設(shè)置為relative而且沒(méi)有偏移。
絕對(duì)定位是相對(duì)于已定位的最近的祖先元素，如果沒(méi)有已定位的最近的祖先元素，那么它的位置就相對(duì)于最初的包含塊。絕對(duì)定位的框可以從它的包含塊向上、下、左、右移動(dòng)。
絕對(duì)定位的框脫離普通流，所以它可以覆蓋頁(yè)面上的其他元素，可以通過(guò)設(shè)置Ｚ-Iindex屬性來(lái)控制這些框的堆放次序。

fixed：固定定位
元素從文檔流刪除，并相對(duì)于瀏覽器視窗定位，因此不隨文檔滾動(dòng)而移動(dòng)。元素在原本的空間關(guān)閉。元素定位后生成一個(gè)塊級(jí)框，不論它原來(lái)是行內(nèi)元素還是塊級(jí)元素。與絕對(duì)定位的區(qū)別僅僅是包含塊不同。
固定定位是相對(duì)于瀏覽器窗口，其余的特點(diǎn)類似于絕對(duì)定位。

4. z-index 有什么作用?

z-index屬性指定2個(gè)方面的內(nèi)容：
1、元素的堆疊級(jí)別。
2、元素的堆疊上下文。

z-index屬性只能夠應(yīng)用在display屬性為relative、absolute或fixed的元素上。
堆疊級(jí)別是元素在Z軸上的取值。值越大，堆疊級(jí)別越高，堆疊級(jí)別高的元素位于堆疊級(jí)別低的元素之上，級(jí)別越高的元素越接近屏幕的顯示平面。

5. position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

負(fù)margin會(huì)使元素在文檔流中的位置發(fā)生偏移，它會(huì)放棄偏移之前占據(jù)的空間，緊挨其后的元素會(huì)填充這部分空間；

相對(duì)定位后元素位置發(fā)生偏移，它仍會(huì)堅(jiān)守原來(lái)占據(jù)的空間，不會(huì)讓文檔流的其他元素流入。

6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說(shuō)明

BFC（Block Formatting Context）直譯為“塊級(jí)格式化范圍”。是 W3C CSS 2.1 規(guī)范中的一個(gè)概念，它決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。當(dāng)涉及到可視化布局的時(shí)候，Block Formatting Context提供了一個(gè)環(huán)境，HTML元素在這個(gè)環(huán)境中按照一定規(guī)則進(jìn)行布局。

BFC布局規(guī)則：

1. 內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
2. Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
3. 每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
4. BFC的區(qū)域不會(huì)與float box重疊。
5. BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
6. 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

哪些元素會(huì)生成BFC

1. 根元素
2. float屬性不為none
3. position為absolute或fixed
4. display為inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不為visible

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
　　因?yàn)锽FC內(nèi)部的元素和外部的元素絕對(duì)不會(huì)互相影響，因此， 當(dāng)BFC外部存在浮動(dòng)時(shí)，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會(huì)通過(guò)變窄，而不與浮動(dòng)有重疊。同樣的，當(dāng)BFC內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，BFC計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免margin重疊也是這樣的一個(gè)道理。

7. 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？

外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

1. 兩個(gè)同級(jí)上下元素

2. 祖先元素與內(nèi)嵌元素（沒(méi)有內(nèi)邊距或邊框隔開(kāi),就祖先元素overflow:hidden/auto/scroll可有隔開(kāi)的作用，避免疊加）
3. 本身是空元素時(shí),自身上下外邊距也會(huì)重合（沒(méi)有邊框或內(nèi)邊距隔開(kāi)）

border和padding是不讓父子元素外邊距合并。