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

文檔流（normal flow），也稱為標準文檔流、常規流、普通流等，是元素在html文檔的定位方式之一，標準流的元素的位置由該元素在html中的位置所決定。主要表現形式是元素由上到下、由左到右依次排版布局。
總的來說，css的定位機制可分為：文檔流、浮動和定位

• 文檔流：包括塊級元素的塊級格式、行內元素的行內格式

• 浮動：浮動將元素從文檔流中脫離出來，向左或向右浮動直至碰到另一元素的邊框或邊界才停止浮動；

• 定位

  • 絕對定位：以父元素的左上角的頂點為參考點，進行定位，元素將脫離文檔流
  • 相對定位：元素相對于自身所處的原來位置進行定位，元素不脫離文檔流(相對定位可以說是特殊的文檔流)

綜上所述，通過浮動和絕對定位機制都可使元素脫離文檔流。

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

css的定位機制包括：文檔流、浮動和定位

• 文檔流
  文檔流是默認的定位方式，實現方式是直接在標簽內寫入內容，html會自動排版布局。
  具體演示效果如下：

• 浮動
  css浮動屬性提供左浮或右浮兩種屬性值，元素的浮動規則是元素的邊框浮動至包含框或另一個浮動框（必須是浮動著的元素）才停止，并且浮動元素將脫離文檔流。
  浮動的基本原理如下：

出現上述的情況是：
當某個div遇到浮動元素的時候，會產生同一個div下內容和包裹它的盒子的分離，而盒子的內容則會環繞在浮動元素周圍，解決方法在后面會提及。

此時，3個方塊都是浮動元素，方塊2左浮遇到方塊1這浮動元素停止左浮，方塊3同理。

同樣是3個方塊左浮，但是如果一行的寬度不足以讓某個浮動元素容納，則它會自動左浮至下一行。

• 定位（position）
  定位可分為static、absolute、relative和fixed，下面主要講解absolute、relative和fixed。
  • absolute是絕對定位，參考點是以已經定位的父元素的左上頂點

上圖顯示，方塊2相對于已經定位的父元素實現絕對定位。

• relative是相對定位，參考點是以元素所在的原來位置的左上頂點

• fixed，參考點是瀏覽器的頁面視窗的左上頂點

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

• absolute是絕對定位，參考點是以已經定位的父元素的左上頂點
• relative是相對定位，參考點是以元素所在的原來位置的左上頂點
• fixed，參考點是瀏覽器的頁面視窗的左上頂點

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

z-index是設置元素的堆疊順序，擁有高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注意，這里所指的是堆疊順序而不是z-index的值的大小，并且z-index 僅能在定位元素上奏效

• 堆疊順序
  • 不對元素設position時，文檔流后面的元素覆蓋前面的元素；
  • 將元素設置的position設置為relative ，absolute 或者 fixed，元素會覆蓋沒有設置 position 屬性或者屬性值為 static 的元素
• 當存在3個元素

<div id="a">
 <div id="a-1" style="position:relative;">A-1</div></div>
<div id="b">B</div>

A、B均沒有設置position，但A的子元素A-1設置了，那么B會覆蓋A，A-1會覆蓋B

• 在不存在父子關系的4個元素中，z-index最大的覆蓋其余3個，z-index為0的和沒設置position的堆疊關系遵循先后順序，z-index為負數的位于z-index：0的后面

• 存在父子關系情況下，子元素會繼承父元素的堆疊關系

  
  
• 若所有元素都定義了 position:relative, 并且A 元素的 z-index 和 B 元素一樣大, 但因為順序規則, B 元素覆蓋在 A 元素前面. 就算 A 的子元素z-index 值比 B 的子元素大, B 的子元素還是會覆蓋在 A 的子元素前面。

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

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

 .box{
  background:lightgreen;
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
}
/* 左外邊距和上外邊距分別設置成寬高的一半 */

具體效果如下：

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

浮動元素的特征：

• 浮動元素將脫離文檔流，不占據文檔的空間

• 添加浮動屬性且不設置寬高，內容會將撐開盒子，類似inline-block

  
  
• 設置寬高和float后，相當于懸浮的inline-block
  
  
  浮動元素對其他元素的影響：
• 對浮動元素的影響，詳見第2題浮動篇；
• 對普通元素的影響，普通元素會占據浮動元素原來所在的文檔位置；
• 對文字而言，除了自身的文字外，其他元素中的文字一律環繞浮動元素周圍；

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

清除浮動是指對浮動元素所產生的影響其他元素的浮動效果予以清除，以期達到開發者期望的布局。
針對浮動產生的問題，清除浮動可以分為兩種：

• 浮動元素使得同級的非浮動元素緊隨其后

可以在浮動元素中添加clear：left|right|both達到清除浮動,即不允許浮動元素的左側、右側或兩側出現其他浮動元素

• 如果子元素是包裹在自適應寬高的父元素中，那么一旦該子元素浮動，父元素的高度會“塌陷”，因為父元素的高度就是子元素的高度，浮動使得子元素脫離文檔流，讓父元素認為子元素“不存在”了

方法：在父元素中添加clearfix樣式,設計思想就是在父元素前或后加入一個內容為空的盒子，并設置這個盒子具有clear屬性，從而使得前面的浮動元素“無處可逃”
具體代碼如下：

.clearfix{
  overflow:hidden;
  *zoom:1; /* for ie 6*/
}

或者

.clearfix:before, .clearfix:after
{ content: ""; display: table;}
.clearfix:after{ clear: both;}
.clearfix
{ *zoom: 1; /* for ie 6,7*/}

demo

9.代碼

代碼地址：github
寫出如下兩欄布局, 其中中間區塊寬度900px, 居中,左側邊欄寬度200px, 右側邊欄寬度700px

• ps: 圖片左浮動，導航欄整體右浮動，導航欄里面的li元素左浮動。
• ps: aside左浮動，main左浮動
• 凡是有浮動的地方，其直接父元素必須清除浮動

不使用背景圖片實現如下效果

參考資料

• css的定位機制
• CSS 定位與文檔流
• CSS float浮動的深入研究、詳解及拓展(一)
• CSS float浮動的深入研究、詳解及拓展(二)
• css樣式float造成的浮動“塌陷”問題的解決辦法
• z-index詳解