浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動元素的特征：
- 浮動元素會脫離正常的文檔流，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示
- 浮動元素后面的塊級元素的內容會向浮動元素的外邊距靠齊，但是邊框和背景卻忽略浮動元素而向上一個非浮動元素靠齊
- 浮動元素后面的內聯元素會向此浮動元素的外邊距靠齊
浮動元素的影響：
1.對其父元素的影響
對于其父元素來說，元素浮動之后，它脫離當前正常的文檔流，所以它也無法撐開其父元素，造成父元素的塌陷
- 對其兄弟元素（非浮動）的影響
- 如果兄弟元素為塊級元素，該元素會忽視浮動元素而占據它的位置，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層次位置），但它的內部文字和其他行內元素都會環繞浮動元素。
- 如果兄弟元素為內聯元素，則元素會環繞浮動元素排列。
- 對其兄弟元素（浮動）的影響
- 同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們的后面
- 反方向的浮動元素：互不影響，位于同一水平線上，當空間不夠時會被擠下
- 對子元素的影響
當一個元素浮動時，在沒有清除浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，并且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。
清除浮動指什么? 如何清除浮動? 兩種以上方法
解決浮動父容器高度塌陷問題
- 父元素的最后設置 clear:both;（當添加了最后一個冗余元素（未設置clear:both）時；父元素和此冗余元素的高度都為0，并且三個浮動的元素都浮在了它們的上方蓋住了它們（可以把它們看成PS中的圖層）。現在，給這個冗余元素添加clear:both，它便要躲開這三個浮動元素，因此，一直往下跑，直到沒有被浮動元素蓋住才停下來。而父元素看到這個子元素跑開了，自然想要包裹住它。）
- 偽類:after寫入空白元素來清
.fix::after {
content:"";
display:table;
clear:both;
}
- 給父元素添加overflow:hidden
創建了 BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與創建BFC， 它規定了內部的Block-level Box如何布局，并且與這個獨立盒子里的布局不受外部影響，當然它也不會影響到外面的元素。它具有以下特征：
1.內部的Box會在垂直方向，從頂部開始一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生疊加。
3.每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區域不會與float box疊加。
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。
6.計算BFC的高度時，浮動元素也參與計算。
- 浮動 (元素的 float不為 none）
- 絕對定位元素 (元素的 position為 absolute 或 fixed)
- 行內塊 inline-blocks (元素的 display: inline-block)
- 表格單元格 (元素的 display: table-cell，HTML表格單元格默認屬性)
- 表格標題 (元素的 display: table-caption，HTML表格標題默認屬性)
- overflow的值不為 visible的元素
- 彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)
有幾種定位方式，分別是如何實現定位的，參考點是什么，使用場景是什么？
- absolute生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- fixed生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
- relative生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
- static默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
這個熟悉了就知道用哪個了，比如有些div懸浮在上方，可能就需要fixed，也就是滾動條移動時不會改變與瀏覽器的位子，relative可能就要相對于父結點進行定位了一般都是相對定位的
z-index 有什么作用? 如何使用?
z-index就是網頁的z軸，用相對定位絕對定位把兩個層重疊在一起，z-index的值越大，就越靠上。
position:relative和負margin都可以使元素位置發生偏移?二者有什么區別
position:relative;只相對自己原本位置發生偏移，不影響其它普通流中元素的位置。
margin：除了讓元素自身發生偏移還影響其它普通流中的元素。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC是塊級格式上下文。其定義是：浮動、絕對定位（絕對定位、固定定位）元素、塊級容器（如inline-block、 table-cell、table-caption）并不是塊級盒子，還包括哪些overflow屬性值取值visible以外的塊級盒子，會為它們的內容物創建一個新的塊級格式化上下文。對元素設置以下屬性就可以生成BFC：
float: left | right;
overflow: hidden | auto | scroll;
display: table-cell | table-caption | inline-block;
position: absolute | fixed;
BFC的作用有：
（1） 解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內容、padding等）就會發生margin重疊。這是只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
（2） 清除浮動。因為BFC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了浮動。
在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
（1）兩個兄弟元素在垂直方向上合并外邊距，取較大值進行合并。
#box1 {
width:100px;
height:100px;
margin-bottom:20px;
}
#box2 {
width:100px;
height:100px;
margin-top:10px;
}
<div id="box1">
</div>
<div id="box2">
</div>
這時兩個div在垂直距離上的外邊距進行了合并，合并后的值是20px。
（2）父子元素間沒有阻擋（如：邊框、非空內容、padding等）時發生上和/或下外邊距合并。
例：
<div class=”parent”>
<div class=”child”>
</div>
</div>
.parent{
width: 200px;
height: 100px;
margin-top:10px;
background-color: red;
}
.child{
width: 100px;
height: 100px;
margin-top:30px;
background-color: yellow;
}
這時就會發生合并。合并后的外邊距是30px。
（3）外邊距自己和自己合并
如果一個元素沒有邊框和填充，但有上下外邊距，這時它的上下外邊距會合并。例：
#box1 {
margin-top:50px;
margin-bottom:20px;
}
<div id="box1">
</div>
這時上下外邊距合并成50px。
除此之外，若該元素垂直方向上的兄弟元素也有外邊距，那么垂直方向的外邊距依舊會發生合并。例：
#d1 {
margin-top:50px;
margin-bottom:20px;
}
#d2 {
width:100px;
height:100px;
margin-bottom: 80px;
}
<div id="d2">
</div>
<div id="d1">
</div>
這時，外邊距合并成80px。
