浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
- 浮動模型是一種可視化格式模型，浮動的框可以左右移動（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。
- 浮動元素會脫離普通流，如果父容器中的元素都浮動，則會造成父元素高度塌陷，即父元素高度為0。
- 浮動元素不在文檔的普通流中，文檔的普通流中的元素表現(xiàn)的就像浮動元素不存在一樣。
- 浮動元素后面框的文本內(nèi)容會受到浮動元素的影響,會移動以留出空間。即浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框。
清除浮動指什么? 如何清除浮動? 兩種以上方法
- 清除浮動指的就是解決浮動時造成的父元素高度塌陷問題。
- 在父元素的末尾添加一個無意義的空標簽，使其
clear = both。 - 利用BFC清理浮動。BFC可以包含浮動，因此只需讓父元素形成BFC，即可包含父元素中的浮動元素。例如將父元素樣式設置為
overflow = hidden或display = inline-block等，都可讓父元素形成BFC。 - 使用通用的清理浮動方案，無副作用：
.clear::after {
content: "";
display: block;
clear: left;
}
.clear::after {
content: "";
diaplay: table;
clear: both;
}
有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
-
relative：相對于元素本身正常位置進行定位, 其原來在文檔流中的空間會進行保留。因此在對圖標位置進行微調(diào)時，可使用相對定位。 -
absolute：相對于距離最近的非static元素進行定位，如果沒有非static元素，則相對于根元素html進行定位。兩欄布局或者清理浮動時都可以考慮使用局對定位。因為絕對定位元素會脫離文檔流，所以絕對定位的元素可以覆蓋頁面上的其他元素。 -
fixed：相對于視口的左上角進行定位，也會脫離文檔流。當對頁面的頂部導航使用固定定位后，在用戶滾動頁面時，導航條會一直停留在視口頂部。一些廣告彈窗，或回到頂部按鈕也會使用固定定位。
z-index 有什么作用? 如何使用?
- 設定了定位元素及其子元素的堆疊順序。
- 擁有更高堆疊順序的元素一般情況下會處于堆疊順序較低的元素的前面。更詳細的可以參考我的博客理解CSS：z-index
position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
都可以使元素位置發(fā)生偏移。position:relative不會影響文檔流中的其他元素的位置，而負邊距則會對其他元素產(chǎn)生影響。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
- BFC(Block formatting context)直譯為"塊級格式化上下文"。 它是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)則，決定了其子元素如何布局，以及和其他元素之間的關系和作用。
- 滿足下列條件之一就可觸發(fā)BFC：
（1）float的值不為none
（2）position的值不為relative
（3）overflow的值不為visible
（4）display的值為inline-block、table-cell、table-caption、flex或inline-flex - 舉例：
（1）BFC阻止垂直外邊距折疊
（2）BFC包含浮動，可防止父元素高度塌陷
（3）BFC可以使行內(nèi)不圍繞浮動元素
在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
- 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者（或者正負邊距的加和）。
- 生成 BFC 的元素不會和在流中的子元素發(fā)生空白邊折疊。
-
父子外邊距合并：
task10.png
task101.png
