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

文檔流（normal flow）傲须，也稱為標準文檔流纯赎、常規(guī)流、普通流等纷闺，是元素在html文檔的定位方式之一，標準流的元素的位置由該元素在html中的位置所決定份蝴。主要表現形式是元素由上到下犁功、由左到右依次排版布局。
總的來說婚夫，css的定位機制可分為：文檔流浸卦、浮動和定位

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

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

• 定位

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

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

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

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

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

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

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

此時迟蜜，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 元素一樣大, 但因為順序規(guī)則, B 元素覆蓋在 A 元素前面. 就算 A 的子元素z-index 值比 B 的子元素大, B 的子元素還是會覆蓋在 A 的子元素前面。

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

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題浮動篇枢劝；
• 對普通元素的影響井联，普通元素會占據浮動元素原來所在的文檔位置；
• 對文字而言您旁，除了自身的文字外烙常，其他元素中的文字一律環(huán)繞浮動元素周圍；

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

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

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

可以在浮動元素中添加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
寫出如下兩欄布局, 其中中間區(qū)塊寬度900px, 居中,左側邊欄寬度200px, 右側邊欄寬度700px

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

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

參考資料

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