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

特征：

1. 浮動(dòng)元素脫離了正常的文檔流眠屎，使普通文檔流的元素?zé)o法識(shí)別浮動(dòng)元素，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣肆饶。
2. 普通文檔流中的行內(nèi)框（如文本）能夠感知到浮動(dòng)元素的存在改衩，能夠?qū)崿F(xiàn)簡(jiǎn)單的文字環(huán)繞效果，這也是浮動(dòng)出現(xiàn)的本質(zhì)驯镊。
3. 浮動(dòng)元素直到碰到它的包含框或另一個(gè)浮動(dòng)框的邊緣葫督。
4. 浮動(dòng)元素具有BFC特性竭鞍，如浮動(dòng)元素間不會(huì)發(fā)生外邊距重疊。
5. 清理浮動(dòng)后橄镜，該元素的邊框與浮動(dòng)元素的外邊距相鄰偎快，即外邊距可能在浮動(dòng)框內(nèi)。
6. 浮動(dòng)元素具有包裹性洽胶，在沒有設(shè)置widh的情況下晒夹，寬度由內(nèi)容撐開。
7. 即使是inline元素姊氓，浮動(dòng)后也能顯示的設(shè)置寬高丐怯。

影響：

1. 因?yàn)槠洳辉倨胀ㄎ臋n流中， 能造成父元素“高度塌陷”翔横。
2. 其他浮動(dòng)元素會(huì)"察覺"到浮動(dòng)元素的存在按照從左到右的"正常文檔流"排列读跷。
3. 普通元素會(huì)表現(xiàn)的像浮動(dòng)元素不存在一樣，不過行內(nèi)框（如文本）能感知到禾唁。
4. 行內(nèi)框（如文本）會(huì)環(huán)繞浮動(dòng)元素效览，實(shí)現(xiàn)文字環(huán)繞效果。

2. 清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法

清除浮動(dòng)指元素的側(cè)邊不允許出現(xiàn)浮動(dòng)元素荡短，從而使得浮動(dòng)元素的不占據(jù)普通文檔流空間的使得父元素的高度塌陷問題得到解決丐枉，主要通過clear屬性實(shí)現(xiàn)。

方法：
1.使浮動(dòng)元素的父元素具有BFC特性掘托。

.clearfix {
    *zoom:1;         // 其中*為CSS hack矛洞，為了兼容IE6、7烫映，使其haslayout
}
.clearfix:after {
    content: "";
    display: "block";
    clear: both;
}

3. 有幾種定位方式，分別是如何實(shí)現(xiàn)定位的噩峦，參考點(diǎn)是什么锭沟，使用場(chǎng)景是什么？

4. z-index 有什么作用? 如何使用?

參考深入理解CSS中的層疊上下文和層疊順序等舔，注意理解七階層疊水平，層疊上下文糟趾，層疊順序慌植。
z-index與元素在Z軸方向上的顯示有關(guān)。

當(dāng)元素發(fā)生層疊的時(shí)候：

1. 誰大誰上：當(dāng)具有明顯的層疊水平標(biāo)示的時(shí)候义郑，如識(shí)別的z-indx值蝶柿，在同一個(gè)層疊上下文領(lǐng)域，層疊水平值大的那一個(gè)覆蓋小的那一個(gè)非驮。
2. 后來居上：當(dāng)元素的層疊水平一致交汤、層疊順序相同的時(shí)候，在DOM流中處于后面的元素會(huì)覆蓋前面的元素劫笙。

z-index與層疊上下文：

1. z-index不為auto的定位元素會(huì)創(chuàng)建層疊上下文芙扎。
2. 定位元素默認(rèn)的z-index: auto可以看成z-index: 0。只不過z-index: 0會(huì)創(chuàng)建層疊上下文填大。
3. z-index層疊順序的比較止步于父級(jí)層疊上下文戒洼。

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

position:relative相對(duì)自己原本的位置偏移，不影響其它普通流中元素的位置允华。
margin：除了讓元素自身發(fā)生偏移還影響其它普通流中的元素圈浇。

6. BFC 是什么？如何生成 BFC靴寂？BFC 有什么作用磷蜀？舉例說明

BFC：塊級(jí)格式化上下文（block formatting context），它是一個(gè)獨(dú)立的渲染區(qū)域百炬，只有Block-level box參與褐隆，它規(guī)定了內(nèi)部的Block-level box如何布局，并且與這個(gè)區(qū)域外部毫不相干剖踊。

形成條件：

1. 根元素
2. float不為none
3. position為absolute或fixed
4. display為inline-block妓灌、table-cell轨蛤、table-caption、flex虫埂、inline-flex
5. overflow不為visible

特性及作用：

1. BFC的區(qū)域不會(huì)與float box重疊祥山。 （外部）
2. BFC就是頁面上的一個(gè)獨(dú)立的容器，容器里面的子元素不會(huì)影響到外面的元素掉伏。
3. BFC元素不會(huì)發(fā)生margin重疊缝呕。
4. 能感知到浮動(dòng)元素存在，計(jì)算BFC高度時(shí)斧散，浮動(dòng)元素也參與供常。可以利用其清理浮動(dòng)鸡捐。
   可以利用BFC特性及display: table-cell的包裹性栈暇，天生無溢出特性，絕對(duì)寬度也能自適應(yīng)箍镜，來實(shí)現(xiàn)兩欄自適應(yīng)布局：

.cell {
    display: table-cell;
    width: 2000px;
    *display: inline-block;     // 兼容IE6,7
    *width: auto;
}

7. 在什么場(chǎng)景下會(huì)出現(xiàn)外邊距合并源祈？如何合并？如何不讓相鄰元素外邊距合并色迂？給個(gè)父子外邊距合并的范例

只有普通文檔流中的塊元素的垂直外邊距才會(huì)發(fā)生外邊距合并香缺，行內(nèi)框、浮動(dòng)框歇僧、絕對(duì)定位框之間的外邊距不會(huì)疊加图张。

如何合并：

1. 兩個(gè)margin都是正值的時(shí)候，取兩者的最大值
2. 兩個(gè)margin都是負(fù)值的時(shí)候诈悍，取的是其中絕對(duì)值較大的祸轮，
3. 有正有負(fù)時(shí)，先取出負(fù) margin 中絕對(duì)值中最大的侥钳，然后适袜，和正 margin 值中最大的 margin 相加。

不讓相鄰元素外邊距合并方法：

1. 利用 BFC會(huì)阻止垂直外邊距折疊的特性慕趴，將對(duì)應(yīng)元素轉(zhuǎn)換為BFC來解決邊距重疊。
2. 在父元素中添加padding或border來將兩個(gè)外邊距分開鄙陡，阻止父元素與子元素的外邊距合并冕房。

父子外邊距合并的范例：

<div class="layout">
    <div class="ct">
        <div class="box"></div>
    </div>
</div>

.layout {
    border: 2px solid #000;
    background-color: #f00;
}
.ct {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    background-color: #0f0;
}
.box {
    width: 50px;
    height: 50px;
    margin-top: 50px;
    background-color: #00f;
}

效果圖