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