1.浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響?
答：浮動(dòng)模型也是一種可視化格式模型，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣。浮動(dòng)元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣。
對(duì)父容器的影響：如果父元素只包含浮動(dòng)元素，且父元素未設(shè)置高度和寬度的時(shí)候。那么它的高度就會(huì)塌縮為零，也就是所謂的“父容器塌陷”。（如下圖所示）
其他浮動(dòng)元素的影響：浮動(dòng)元素會(huì)按照順序排列下去，若父容器剩余的寬度不夠放下下一個(gè)浮動(dòng)元素，那么它將向下移動(dòng)，若是高度不同，在下移的過程中，浮動(dòng)元素還有可能會(huì)被卡住。(如下圖所示）
對(duì)普通元素的影響：普通元素?zé)o法感知到浮動(dòng)元素，會(huì)被浮動(dòng)元素遮擋（如下圖所示，box3被遮擋住了）
對(duì)文字的影響：文字可以感知浮動(dòng)元素，會(huì)圍繞浮動(dòng)元素(如下圖所示）
2.清除浮動(dòng)指什么? 如何清除浮動(dòng)? 兩種以上方法
答：清除浮動(dòng)是指清除由于子元素浮動(dòng)帶來父元素高度塌陷的影響。
兩種方法：
1.如果我們想讓父元素在視覺上包圍浮動(dòng)元素可以像下面這樣處理，在最后添加一個(gè)空div,對(duì)它清理，缺點(diǎn)是增加了一個(gè)無意義的標(biāo)簽。(如下圖）
2.利用偽元素清除浮動(dòng)(如下圖所示）
3.利用BFC清理浮動(dòng)(如下圖）
3.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，參考點(diǎn)是什么，使用場景是什么？
CSS有三種基本的定位機(jī)制：普通流、相對(duì)定位和絕對(duì)定位
1.普通流是默認(rèn)定位方式，在普通流中元素框的位置由元素html中的位置決定，元素position屬性為static或繼承來的static時(shí)就會(huì)按照普通流定位，這也是我們最常見的方式。
2.相對(duì)定位比較簡單，對(duì)應(yīng)position屬性的relative值，如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上，然后可以通過設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于它自己移動(dòng)，在使用相對(duì)定位時(shí)，無論元素是否移動(dòng)，元素在文檔流中占據(jù)原來空間，只是表現(xiàn)出來的位置會(huì)改變。
3.絕對(duì)定位與固定定位
● 相對(duì)定位可以看作特殊的普通流定位，元素位置是相對(duì)于它在普通流中的位置發(fā)生變化，而絕對(duì)定位使元素的位置與文檔流無關(guān)，也不占據(jù)文檔流空間，普通流中的元素布局就像絕對(duì)定位元素不存在一樣。
● 絕對(duì)定位的元素的位置是相對(duì)于距離最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對(duì)于初識(shí)包含塊html來定位。
● 因?yàn)榻^對(duì)定位與文檔流無關(guān)，所以絕對(duì)定位的元素可以覆蓋頁面上的其他元素，可以通過z-index屬性控制疊放順序，z-index越高，元素位置越靠上。
● fixed固定定位，固定定位是絕對(duì)定位的一種，固定定位的元素也不包含在普通文檔流中，差異是固定元素的包含塊兒是視口（viewport)
4.z-index 有什么作用? 如何使用?
答：z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
注釋：元素可擁有負(fù)的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute、relative、fixed）
該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative是相對(duì)于自身在文檔流的位置發(fā)生偏移，原本所占有的位置不會(huì)被其他元素占據(jù)，外形發(fā)生了移動(dòng)但本身的位置是不動(dòng)的；而負(fù)margin則文檔流的位置會(huì)發(fā)生偏移，會(huì)讓后面的元素也發(fā)生位置的偏移。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC全稱是Block Format Content，塊級(jí)格式化上下文
BFC特性：具有BFC特性的元素可以看作是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且BFC具有普通容器所沒有的一些特性。
通俗一點(diǎn)來講，可以把BFC理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海都不會(huì)影響到外部。
觸發(fā)BFC：
只要滿足元素下面任一條件即可觸發(fā)BFC特性：
● body根元素
● 浮動(dòng)元素：float除none以外的值
● 絕對(duì)定位元素：position(absolute、fixed)
● display為inline-block、table-cells、flex
● overflow除了visible以外的值(hidden、auto、scroll)
BFC作用：
● 同一個(gè)BFC下外邊距會(huì)發(fā)生折疊，如果想要避免外邊距的重疊，可以將其放在不同的BFC容器中。
● BFC可以包含浮動(dòng)的元素（清除浮動(dòng)）
● BFC可以阻止元素被浮動(dòng)元素覆蓋
1、BFC會(huì)阻止垂直外邊距（margin-top、margin-bottom)折疊
按照BFC的定義，只有同屬于一個(gè)BFC時(shí)，兩個(gè)元素才有可能發(fā)生垂直margin的重疊，這個(gè)包括相鄰元素，嵌套元素，只要他們之間沒有阻擋（例如邊框，非空內(nèi)容，paading等）就會(huì)發(fā)生magin重疊
因此要解決margin重疊問題，只要讓它們不在同一個(gè)BFC就行了，但是對(duì)于兩個(gè)相鄰元素來說，意義不大，沒有必要給他們加個(gè)外殼，但是對(duì)于嵌套元素來說就很有必要了，只要把父元素設(shè)為BFC就可以了。這樣子元素的margin就不會(huì)和父元素的margin發(fā)生重疊。
2、BFC不會(huì)重疊浮動(dòng)元素
3、BFC可以包含浮動(dòng)(overflow:auto; overflow:hidden；副作用比較小；
7.在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例
答：外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
1.當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖：
2.當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖
3.假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并.
(注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。)
形成BFC 可以阻止外邊柜合并，對(duì)于垂直相鄰的元素可以設(shè)置浮動(dòng)或設(shè)置其中一個(gè)元素為display:inline-block;對(duì)于父子元素外邊距，可為父元素設(shè)置padding或border。
