1 ,文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?

• 文檔流指的是元素沒有浮動和絕對定位是的正常的布局方式。塊級元素從上到下排列；行內元素從左到右排列，如果整行就換行排列。

• 可以讓元素脫離文檔流的方式有：

1. 定位 （包括absolute和fixed定位。）
2. 浮動

2 ,有幾種定位方式，分別是如何實現定位的，使用場景如何？

• 定位方式:

1. position:static：代表元素沒有定位，元素正常出現在文檔流中。
2. position:absolute：代表絕對定位，相對于除position:static外的第一個父元素進行定位。如果父元素沒有position，則繼續向上尋找。元素的位置通過top/bottom/right/left屬性進行定位。（脫離文檔流）如果沒有父元素，位置是相對于body來進行的。若父元素有定位（position設為relative、absolute或fixed），則相對于父元素定位。絕對定位會使元素從文檔流中被刪除，結果就是該元素原本占據的空間被其它元素所填充。
3. position:relative：生成相對定位元素，相對其原始位置進行定位。（不脫離文檔里）
4. position:fixed：生成絕對定位元素，完全脫離文檔流，相對于瀏覽器窗口進行定位，不受頁面滾動的影響，效果類似與網頁小廣告。通過top/left/right/bottom屬性進行定位。

3 ,absolute, relative, fixed 偏移的參考點分別是什么

• absolute：參考父級定位，如果父級沒有片position，則繼續向上尋找定位，如果沒有position，則參考body進行定位。一般如果想給absolute一個參考，在它的父級加position:relative。（對父級無任何影響）
• relative：參考原來位置進行定位。適合原位置進行微調。
• fixed：參考瀏覽器窗口進行定位。

4 ,z-index 有什么作用? 如何使用?

• z-index作用：對定位元素（除static）用來控制層疊元素的顯示優先級，值越大越優先，如果沒有設置，則默認靠后者優先。
• 父子關系處理
  1.如果父元素z-index有效，那么子元素無論是否設置z-index都和父元素一致，會在父元素上方
  2.如果父元素z-index失效（未定位或者使用默認值），那么定位子元素的z-index設置生效
• 兄弟之間子元素
  如果兄弟元素的z-index生效，那么其子元素覆蓋關系由父元素決定

5 ,position:relative和負margin都可以使元素位置發生偏移?二者有什么區別

margin是邊距,說白了就是把其他東西向外/里擠,它們的寬/高度都算在所屬元素的實際里面,不能算是移動；positon是相對元素(relative)或者瀏覽器(absolute)的定位,也就是移動。
另外，position:relative后，元素原有的空間仍被占據，后面的元素不會擠占；但負margin后后面的元素會一起移動。

6 ,如何讓一個固定寬高的元素在頁面上垂直水平居中?

7 ,浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?

• 浮動就是使元素脫離文檔流，不占用文檔流位置。
  同向浮動，其他浮動元素跟在其后，滿行換行。普通元素圍繞浮動元素。文字圍繞浮動元素。
• 影響：

1. 對其父元素的影響
   對于其父元素來說，元素浮動之后，它脫離當前正常的文檔流，所以它也無法撐開其父元素，造成父元素的塌陷
2. 對其兄弟元素（非浮動）的影響
   如果兄弟元素為塊級元素，該元素會忽視浮動元素的而占據它的位置，并且元素會處在浮動元素的下層（并且無法通過z-index屬性改變他們的層疊位置），但它的內部文字和其他行內元素都會環繞浮動元素。
   如果如果兄弟元素為內聯元素，則元素會環繞浮動元素排列。
3. 對其兄弟元素（浮動）的影響
   同一個方向的浮動元素：當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時，它會緊跟在它們后面
   反方向的浮動元素：互不影響，位于同一條水平線上，當空間不夠時會被擠下
4. 對子元素的影響
   當一個元素浮動時，在沒有清除浮動的情況下，它無法撐開其父元素，但它可以讓自己的浮動子元素撐開它自身，并且在沒有定義具體寬度情況下，使自身的寬度從100%變為自適應（浮動元素display:block）。其高度和寬度均為浮動元素高度和非浮動元素高度之間的最大值。

8 ,清除浮動指什么? 如何清除浮動?

• 在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
• 清除浮動方法：
  1、使用帶clear屬性的空元素
  在浮動元素后使用一個空元素如<div class=“clear”></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class=“clear” />或<hr class=“clear” />來進行清理。
  2、使用CSS的overflow屬性
  給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設置容器寬高或設置 zoom:1。在添加overflow屬性后，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。
  3、給浮動的元素的容器添加浮動
  給浮動元素的容器也添加上浮動屬性即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。
  4、使用鄰接元素處理
  什么都不做，給浮動元素后面的元素添加clear屬性。
  5、方法五：使用CSS的:after偽元素
  給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。
  需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。