浮動元素有什么特征？
浮動元素
- 浮動元素脫離正常的文檔流；
- 設置浮動元素之后，不浮動的元素則不會感知到浮動元素的存在，則會覆蓋浮動元素所處的位置。
- 浮動元素可以安放在父容器的左右倆端。
對父容器、其他浮動元素、普通元素、文字分別有什么影響？
- 對父容器影響：若是未設置父容器的高度值，則會造成父容器塌陷（原因：父容器是依靠其子元素或內容撐開高度，而浮動元素無法被父容器所感知，則造成塌陷。）
- 對其他浮動元素影響：若是父容器設置了足夠的寬度，則浮動元素會不斷依次排列；
- 對普通元素影響：普通元素無法感知浮動元素的存在，則會擠占浮動元素所在的位置，發生重疊；
- 對文字的影響：文字可以感知到浮動元素的存在，則會圍繞浮動元素。
清除浮動指什么？
清除浮動是指：解決父容器無法感知浮動元素而造成的塌陷。
如何清除浮動？
-
設置父容器的固定寬高：
如圖
1.png
缺點：只適用于一些固定模式大小的布局。
2.為父容器添加overflow屬性：
如圖：
overflow scrool.png
若是設置為scroll，則父容器的寬高小于浮動元素則會出現滾動條 - 父元素添加一個偽元素，然后清除偽元素的浮動：
清除元素添加偽元素.png
4.非浮動塊為父元素，在父元素的底部添加新的空標簽，設置屬性clear: both或者clear: left或者clear: right將偽元素一起設置為浮動元素；
5.設置為BFC模式
有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
- relative：相對定位，仍處在文檔流中；參考點是本身之前的位置。
- absolute：絕對定位，脫離文檔流；參考點是相對于除static定位以外的第一個祖先元素進行定位。
- fixed：固定定位，脫離文檔流，參考點是瀏覽器的窗口，不會因上下滾動而改變位置。
z-index 有什么作用? 如何使用?
因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上其他元素，可以通過z-index屬性控制疊放順序，z-index越高，元素位置越靠上
position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
設置position:relative元素位置產生變化，但是元素在文檔流中位置不變，對后面的元素不會產生影響。
設置負margin會是文檔發生偏移，而relative不會發生
如何讓一個固定寬高的元素在頁面上垂直水平居中?
1.使用絕對定位，top/left偏移的百分比是相對于父容器內容的寬高。
2.margin-top/margin-left是相對于自身元素的寬高。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC的中文意思是塊級格式化上下文，當元素包含以下其中一種元素的時候，就會形成一種新的塊級模式，就稱為BFC。
當塊級元素設置float：left/right或者overflow：hidden/auto/scroll或者display：table-cell/table-caption/inline-block或者position：absolute/fixed時，生成BFC。
BFC的作用：
阻止父子元素外邊距合并。
-
清除浮動，包裹浮動元素。
BFC包裹浮動元素.png -
BFC可以阻止外邊距合并。
BFC可以阻止外邊距合并.png
在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
1.兄弟元素之間外邊距合并
外邊距合并.png
2.父子元素外邊距合并：
BFC阻止父子元素外邊距合并.png
如何不讓相鄰元素外邊距合
設置BFC
設置BFC使倆個元素外邊距不合并.png
