1. 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響?
浮動元素特征：
- 浮動元素會脫離正常的文檔流，按照其外邊距指定的位置相對于它的上一個塊級元素（或父元素）顯示
- 浮動元素后面的內(nèi)聯(lián)元素會向此浮動元素的外邊距靠齊
- 浮動元素后面的塊級元素的文字會環(huán)繞此浮動元素的外邊框
對父容器影響：
元素浮動之后，它脫離當前正常文檔流，所以它也無法撐開其父元素，造成父元素的塌陷
對其他浮動元素影響：
- 同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面
- 反方向的浮動元素：互不影響，位于同一條水平線上，當空間不夠時會被擠下
對普通元素影響：
- 如果兄弟元素為塊級元素，該元素會忽視浮動元素的而占據(jù)它的位置，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內(nèi)部文字和其他行內(nèi)元素都會環(huán)繞浮動元素
- 如果如果兄弟元素為內(nèi)聯(lián)元素，則元素會環(huán)繞浮動元素排列
對文字的影響：
文字會環(huán)繞浮動元素排列
2.清除浮動指什么? 如何清除浮動? 兩種以上方法
清除浮動指元素的側(cè)邊不允許出現(xiàn)浮動元素，從而使得浮動元素的不占據(jù)普通文檔流空間的使得父元素的高度塌陷問題得到解決，主要通過clear屬性實現(xiàn)。
clear:指定一個元素是否可以在它之前的浮動元素旁邊，或者必須向下移動(清除浮動) 在它的下面。clear 屬性適用于浮動和非浮動元素。
當應用于非浮動塊時，它將非浮動塊的邊框邊界移動到所有相關浮動元素外邊界的下方。這個行為作用時會導致margin collapsing不起作用。
當應用于浮動元素時，它將元素的外邊界移動到所有相關的浮動元素外邊界的下方。這會影響后面浮動元素的布局，后面的浮動元素的位置無法高于它之前的元素。
清除浮動方法：
在父容器內(nèi)添加一個標簽，使用clear:both樣式：<div style="clear:both;"></div>，如下：
<div style="border: solid 5px #0e0; width:300px;">
<div style="height: 100px; width: 100px; background-color: Red; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Green; float:left;">
</div>
<div style="height: 100px; width: 100px; background-color: Yellow; float:left;">
</div>
<div style="clear:both;"></div>
</div>-
通過對父容器添加以下樣式，形成BFC達到“清浮動”效果，例如：
.clearfix{ *zoom:1; } .clearfix:after{ content:""; display:block; clear:left; } 設置浮動包含塊的父元素height值。
3. 有幾種定位方式，分別是如何實現(xiàn)定位的，參考點是什么，使用場景是什么？
| 定位方式 | 實現(xiàn) | 參考點 |使用場景|
| --- | --- | --- |
| static | 默認值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |父元素 |普通正常流布局的頁面|
| relative | 生成相對定位的元素，相對于元素本身正常位置進行定位,因此，left:20px 會向元素的 left 位置添加20px | 元素本身正常位置 |1.元素小范圍偏移 2.作為絕對定位子元素的參考點 |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right 以及 bottom 屬性進行規(guī)定 | 相對于static定位以外的第一個祖先元素 |1.小元素的布局，如：按鈕的icon |
| fixed | 固定定位，生產(chǎn)絕對定位元素，但不隨著滾動條的移動而改變位置 | 瀏覽器首屏坐標 |回到頂部按鈕|
| sticky |CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體，在目標區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像position:fixed，它會固定在目標位置 | | | |
4. z-index 有什么作用? 如何使用?
z-index規(guī)定了元素在Z軸（距離用戶遠近）上的順序，值越大則越靠近用戶，表現(xiàn)就是元素在最上面。
z-index僅在設置了position非static屬性的元素生效，且z-index的值只能在兄弟元素之間比較。
Z-index默認值為auto,則不建立層疊上下文。設置為0則會建立層疊上下文。
5. position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
相對定位和負margin都可以使元素位置發(fā)生偏移
區(qū)別：
- position:relative是相對于元素原本的位置進行偏移，偏移之后，原本的元素所占空間依舊保留。
- 負margin是子元素相對于父元素的內(nèi)邊框進行偏移，偏移之后，原本的元素所占空間不保留。并且偏移之后元素仍處于正常文檔流中。
6.BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
BFC是什么
BFC是 block formatting context的縮寫，意思就是格式化內(nèi)容文本。創(chuàng)建了一個BFC的元素就是一個獨立的盒子，只有block level box可以參與創(chuàng)建BFC，他的內(nèi)部與外部都不受盒子外的元素的影響。
生成BFC
可以給需要創(chuàng)建BFC的元素添加以下任意屬性：
1.float，除了none都可以。
2.overflow，設置為auto，hidden，scroll中的任意一個都可以。
3.position，設置為absolute,fixed都行。
4.display，設置為inline-block，table-cell，table-caption。
BFC的作用：
1.阻止垂直邊距的折疊
通過在父元素ct中添加樣式(包括border，padding, float等)的方式，使ct生成新的BFC，從而使外邊距不合并,如下：
2.BFC元素與浮動元素不重疊
在黃色div中添加overflow: hidden; 或 margin:1px; 樣式，
原理：可使黃色div生成新的塊級格式化上下文（BFC），
BFC不會重疊浮動元素
- BFC元素可以包含浮動。
在ct中添加 float:left 或 overfolw:hidden 或 position:absolute 等樣式后，可以使ct的div包裹子浮動元素，防止父元素高度塌陷
7 在什么場景下會出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例
外邊距合并出現(xiàn)的三個場景。
同一個BFC，且同處于普通流中的垂直相鄰元素外邊距合并。
父子元素的外邊距合并。
空元素的外邊距合并。
合并規(guī)則：
兩個margin都是正值的時候，取兩者的最大值；
當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從0位置，負向位移；
當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
所有毗鄰的margin要一起參與運算，不能分步進行。
不讓相鄰元素外邊距合并的方法：
被非空內(nèi)容、padding、border 或 clear 分隔開。
不在一個普通流中或一個BFC中。
margin在垂直方向上不毗鄰。
總結(jié)：
這些margin都處于普通流中，并在同一個BFC中；
這些margin沒有被非空內(nèi)容、padding、border 或 clear 分隔開；
這些margin在垂直方向上是毗鄰的，包括以下幾種情況：
- 一個box的top margin與第一個子box的top margin
- 一個box的bottom margin與最后一個子box的bottom margin，但須在該box的height 為auto的情況下
- 一個box的bottom margin與緊接著的下一個box的top margin
- 一個box的top margin與其自身的bottom margin，但須滿足沒創(chuàng)建BFC、零min-height、零或者“auto”的height、沒有普通流的子元素。
例外的情況
根元素的外邊距不會參與折疊
不設置任何屬性的空span和空div不影響任何布局，可以無視之。
代碼
http://js.jirengu.com/foxefobugi/1/edit
http://js.jirengu.com/nomavohodu/1/edit?html,css,output
