問答
1. 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 浮動元素有什么特征
float 屬性可以使一個元素脫離正常的文檔流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行內元素環繞它。 - 對父容器的影響
如果父容器內的元素均為浮動元素，且父容器未設置height值，會出現父容器高度塌陷 - 對其他浮動元素的影響
同為float： left 或者 float： right的元素，會按照定義的先后順序進行排列，一行內放不下時會另起一行繼續排列；
如果給某個浮動元素設置了clear：left屬性，則該元素左側不允許有浮動元素，如果已經有浮動元素在該元素左側，則該元素會換行，甚至可能出現被卡住的情況，clear：right及clear：both屬性類似 - 對普通元素的影響；
普通元素會因為感知不到浮動元素的存在而占據浮動元素的位置，可能導致被覆蓋； - 對文字的影響
普通元素感知不到浮動元素的存在，但普通元素內的文字會感知到浮動元素的存在從而避開浮動元素進行顯示，會出現文字環繞的現象。
2. 清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清除浮動指什么
如果父容器內的元素均為浮動元素，且父容器未設置height值，會出現父容器高度塌陷，清理浮動其實指的時清除掉父容器高度塌陷的問題 - 如何清楚浮動
1 在父容器內添加空的標簽，并對該空標簽樣式設置為clear：both，使該空標簽左右均沒有浮動元素，從而使該標簽位置下移，以達到撐開父容器高度的目的
2 利用父容器的偽類選擇器給該父容器添加一個空的內容，達到撐開父容器高度的目的，代碼如下：
.父容器:after{
content:"";
display:block;
clear:both;
}
3 使父元素形成新的BFC以達到清楚浮動
3. 有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
- inherit：從父元素繼承；
- static：默認值，沒有定位，元素出現在正常的文檔流中。參考點是文檔流中的位置。
- relative：相對定位。相對于元素本身正常位置進行定位，通過top、bottom、left、right屬性來設置偏移量。使用場景：為絕對定位設定參照物或對元素自身位置進行局部調整。
- absolute：絕對定位。相對于static定位意外的第一個祖先元素進行定位，若都沒有發現則以html標簽為參考進行定位。使用場景：當想讓元素參照特定參照物進行定位時使用。
- fixed：固定定位。生成絕對定位元素，相對于viewport進行定位。
- sticky：對象在常態時遵循普通流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當卷動到屏幕外時則表現如fixed。
4. z-index 有什么作用? 如何使用
z-index 屬性指定了一個元素及其子元素的 z-order。 當元素之間重疊的時候，z-order 決定哪一個元素覆蓋在其余元素的上方顯示。 通常來說 z-index 較大的元素會覆蓋較小的一個。
對于一個已經定位的元素（即position屬性值是非static的元素），z-index 屬性指定：
- 元素在當前堆疊上下文中的堆疊層級。
- 元素是否創建一個新的本地堆疊上下文。
語法：
/* Keyword value */
z-index: auto;
/* <integer> values */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;/* 使用負值降低優先級 */
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
- auto
元素不會建立一個新的本地堆疊上下文。當前堆疊上下文中新生成的元素和父元素堆疊層級相同。 - <integer>
整型數字是生成的元素在當前堆疊上下文中的堆疊層級。元素同時會創建一個堆疊層級為0的本地堆疊上下文。這意味著子元素的 z-indexes 不與元素外的其余元素的 z-indexes 進行對比。
5.position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
- position:relative使元素位置發生偏移時，只是改變了該元素的顯示位置，并未改變該元素在文檔流中本來的位置，會與其他元素產生視覺上的重疊現象；
- 負margin改變元素位置時同時改變該元素在文檔流中的位置；
6. BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
6.1 BFC 是什么
block formatting context，塊級格式化上下文
6.2 如何生成 BFC
塊格式化上下文由以下之一創建：
- 根元素或其它包含它的元素
- 浮動 (元素的float不是 none)
- 絕對定位的元素 (元素具有position為 absolute 或 fixed)
- 內聯塊 inline-blocks (元素具有 display： inline-block)
- 表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性
) - 表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
- 塊元素具有overflow且值不是 visible
6.3 BFC 有什么作用
- BFC會阻止垂直外邊距（margin-top、margin-bottom）折疊
按照BFC的定義，只有同屬于一個BFC時，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對于兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對于嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊
例子：
父子元素上下margin合并
父子元素上下margin未合并
- BFC不會重疊浮動元素
例子：
浮動元素重疊.png
浮動元素未重疊.png
- BFC可以包含浮動
例子：
父容器高度塌陷.png
高度被撐開.png
7. 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
7.1 在什么場景下會出現外邊距合并
- 兄弟元素同處于一個BFC時，會出現上下margin合并的現象
- 當父子元素中的父元素沒有border或padding時，且父元素不是BFC時，父子元素的上下margin會出現合并
7.2 如何合并
合并后的margin值取值為所合并的兩者中的大者
7.3 如何不讓相鄰元素外邊距合并？
可以把相鄰元素處于不同的BFC中從而阻止邊距合并
例子.png
7.4 給個父子外邊距合并的范例
請見6.3的第一個例子
