1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 任何定義為float的元素，都可以設置寬高，并且不會自動換行，有點類似于inline-block（但是從開發者工具中查看，屬性變為了為 display: block;）
- 浮動元素會從普通文檔流中脫出，從正常的排列順序被抽離
- 設置浮動方向后，元素往左或往右移動直到碰到另一個浮動元素或父元素內容區的邊界
對其父元素的影響
對于其父元素來說，元素浮動之后，它脫離當前正常的文檔流，所以它也無法撐開其父元素，造成父元素的塌陷對其兄弟元素（非浮動）的影響
如果兄弟元素為 塊級元素
在現代瀏覽器和IE8+下，該元素會忽視浮動元素的而占據它的位置，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。
需要注意的是，在IE 6、7下則分別都有不同的表現，IE 6、7中，該兄弟元素會緊跟在浮動元素的右側，并且在IE6中兩者之間留有3px的空隙。這就是著名的“IE 3px bug如果如果兄弟元素為 內聯元素
則元素會環繞浮動元素排列對其兄弟元素（浮動）的影響
當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面，這條浮動的隊列和正常的文檔流隊列也依舊在同一個父元素當中。對文字的影響
文字會環繞、包裹浮動元素。
2. 清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指什么
浮動會讓元素脫離文檔流，不再影響不浮動的元素，一定程度上，給布局帶來了一些副作用，清除浮動，就是為了解決這些副作用如何清除浮動
運用clear:both/left/right清除浮動
可以在浮動元素末尾添加一個空內容帶clear樣式屬性的標簽，最常用、最有的方式是添加一個帶clear的偽元素觸發BFC清除浮動
清除子元素浮動，父元素也浮動或者絕對定位觸發BFC。
overflow屬性值非visiable。
display成非塊級盒子。通用的清理浮動方案
用CSS代碼生成一個具有clear屬性的元素
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:block;
clear:left;
}
3. 有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
CSS有三種基本的定位機制：普通流，相對定位和絕對定位
普通流
Static
普通流是默認定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式相對定位
Relative
相對定位比較簡單，對應position屬性的relative值，如果對一個元素進行相對定位，它將出現在他所在的位置上，然后可以通過設置垂直或水平位置，讓這個元素相對于它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中占據原來空間，只是表現出來的位置會改變絕對定位
Absolute
絕對定位方式，脫離文檔流，不會占用頁面空間。以最近的不是static定位的父級元素作為參考進行定位，如果其所有的父級元素都是static定位，那么此元素最終則是以當前窗口作為參考進行定位。可以使用top，bottom，left，right進行位置移動，亦可使用z-index在z軸上面進行移動。當元素為此定位時，如果該元素為內聯元素，則會變為塊級元素，即可以直接設置其寬和高的值；如果該元素為塊級元素，則其寬度會由初始的100%變為auto。
Fixed
絕對定位方式，直接以瀏覽器窗口作為參考進行定位。其它特性同absolute定位。
4. z-index 有什么作用? 如何使用?
z-index屬性指定2個方面的內容：
- 元素的堆疊級別。
- 元素的堆疊上下文。
z-index屬性只能夠應用在display屬性為relative、absolute或fixed的元素上。
z-index屬性有3個可能的取值：
|取值| 描述|
|-||
|auto |設置堆疊的級別為0，并且不建立新的堆疊上下文|
|<integer> |設置一個整數堆疊級別，并且建立一個新的堆疊上下文|
|inherit| 設置和父元素相同的堆疊級別，不建立新的堆疊上下文|
-
堆疊級別
堆疊級別是元素在Z軸上的取值。值越大，堆疊級別越高，堆疊級別高的元素位于堆疊級別低的元素之上，級別越高的元素越接近屏幕的顯示平面。
理解CSS Z-INDEX屬性作用、使用
如果一個元素沒有指定z-index屬性，那么它的堆疊級別根據它在文檔樹中的位置來決定。在文檔樹中，越后聲明的元素堆疊級別越高。
默認規則
z-index 為 0 的節點與沒有定義 z-index 在同一層級內沒有高低之分; 但 z-index 大于等于 1 的節點會遮蓋沒有定義 z-index 的節點; z-index 的值為負數的節點將被沒有定義 z-index 的節點覆蓋.從父規則
如果 A, B 節點都定義了 position:relative, A 節點的 z-index 比 B 節點大, 那么 A 的子節點必定覆蓋在 B 的子節點前面.
5. position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
- position：relative；只對元素本身有作用，不影響其它的元素的位置
- margin 會影響周圍元素的位置
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC(Box Fomatting Context)
Box:
Box 是 CSS 布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個 Box 組成的。元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。
block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block fomatting context；
inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
Formatting context:
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3中還增加了 GFC 和 FFC。
BFC 定義:
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
BFC布局規則:
內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
如何生成 BFC
一個新的BFC可以通過給容器添加任何一個觸發BFC的CSS樣式，如overflow: scroll,overflow: hidden,display: flex,float: left,或者display: table來創建。display:table可能會產生一些問題overflow:scroll可能會顯示不必要的滾動條float:left將會把元素置于容器的左邊，其他元素環繞著它overflow:hidden將會剪切掉溢出的元素BFC 有什么作用
清除內部浮動
我們在布局時經常會遇到這個問題：對子元素設置浮動后，父元素會發生高度塌陷，也就是父元素的高度變為0。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設置overflow:hidden。-
垂直margin合并
在CSS當中，相鄰的兩個盒子的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
折疊的結果：- 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
- 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
- 兩個外邊距一正一負時，折疊結果是兩者的相加的和。
創建自適應兩欄布局
當有一個元素浮動靠向一個普通流元素，浮動元素里的文本會自動環繞在普通流元素周圍，這時候給普通流元素添加特定樣式觸發BFC后，文字就不會環繞了。
7. 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
-
相鄰元素
相鄰元素
當兩個元素上下相鄰時，上面的下外邊距會與下面元素的上外邊距會合并。
如果元素左右相鄰呢？一個典型的場景是幾個inline-block元素并排顯示。 但inline-block元素的外邊距是不合并的，它們會保持自己的間隔。 父子元素
父子元素如果都有上邊距，會合并為其中較大的那一個。
當然，只有兩個外邊距直接相鄰時才會合并。如果父元素有內邊距（padding）或邊框（border），那么它們不會被合并。
-
單個元素
單個元素
如果一個元素沒有內容，也沒有內邊距和邊框，那么它的上下外邊距也會合并。
連續相鄰的外邊距都是可以合并的。 空元素的上下邊距合并時，如果緊接著另一個元素的外邊距，它們都會合并到一起。
注釋：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對定位之間的外邊距不會合并。
- CSS外邊距合并的問題及解決措施
- 設置了的overflow屬性的盒模型，則其與子元素之間的垂直margin不會合并，但其與父元素之間、與相鄰元素之間的margin會合并。（overflow取值為visible除外）
- 設置了float屬性的盒模型，則其與相鄰元素之間、其與父元素之間、其與子元素之間的垂直margin都不會被合并
- 設置了絕對定位position:absolute的盒模型，則其與相鄰元素之間、其與父元素之間、其與子元素之間的垂直margin都不會被合并。（但應注意position:absolute對其后元素的position的影響）
- 設置了display:inline-block的盒模型，則其與相鄰元素之間、其與父元素之間、其與子元素之間的垂直margin都不會被合并。
- 水平margin不會被合并，垂直margin會被合并
- 用內層元素的margin通過外層元素的padding代替；
內層元素透明邊框 border:20px solid transparent
