浮動與定位

 

整理下關於文檔流，浮動，定位及形成的影響文檔流的知識點

一  文檔流的概念指什麼？

　　文檔流，是指元素排版佈局過程當中，元素會自動從左到右，從上往下的流式排列。並最終窗體自上而下分紅一行行，並在每行中按從左到右的順序排放元素。脫離文檔流便是元素打亂了這個排列，或是從排版中拿走。

　　標準流的特色：1.塊級元素從上到下，獨佔一行

　　　　　　　　　2.行內元素，行內塊級元素從左到右在一行中顯示。

　　　　　　　　　3.佔位置。

　　使元素脫離文檔流的方法有：浮動和定位。

二  CSS定位 position

      CSS定位方式有四種：默認定位（static）、相對定位（relative）、絕對定位（absolute）和固定定位（fixed）

      static: 默認值。沒有定位，元素在正常的文檔流中，top，right，bottom，left和z-index屬性無效。

 

　  relative: 生成相對定位的元素，經過top，bottom，left，right的位置相對於其正常位置進行定位。其中的相對指的是相對於元素在默認流中的位置。

　　注意：1.元素偏移以後，他原本默認文檔流中佔據的位置仍然存在，其緊挨其後的元素的定位依據它原本的位置定位；

　　　　　2.該元素偏移以後，可能存在覆蓋其餘元素的狀況，可使用z-index屬性改變層疊狀況。

 

第二個盒子元素相對於以前的位置向下平移了20px，向右平移30px。第三個盒子的位置相對於第二個盒子本來的位置排列。

z-index須要配合position屬性纔能有效，值大者處於頂層，默認值爲0。

 

　　absolute: 生成絕對定位的元素，相對於static定位的第一個父元素進行定位。

      注意: 1.絕對定位的元素已經脫離文檔流，普通流中其餘元素的佈局就像絕對元素不存在同樣；

　　　　 2.絕對定位的元素的位置是相對於最近的已定位的祖先元素，若是元素沒有已定位的祖先元素，它的位置就相對於body；

　　　　 3.絕對定位的框能夠覆蓋頁面的其餘元素。

這種狀況是離box2最近的父元素已定位的狀況，若是離box2最近的父元素沒有定位的話，示例以下：

      

　　fixed:本質上是一種絕對定位，不爲元素預留空間。經過制定相對於屏幕視窗的位置來制定元素的空間，且元素的位置在屏幕滾動時不會發生變化。應用於不少網站頂端的固定導航、下方的廣告，或者右邊的回到頂部div。

  

 

 

3、absolute、relative、fixed偏移的參考點分別是什麼？

         absolute偏移的參考點是：相對於最近的已定位的父元素，若是沒有，則相對於body元素；

　　  relative偏移的參考點是：相對於元素在普通流中的原來位置；

　　  fixed偏移的參考點是：相對於瀏覽器窗口。

 

4、z-index 有什麼做用? 如何使用?

 

z-index屬性用於設置節點的堆疊順序，擁有更高堆疊順序的節點將顯示在堆疊順序較低的節點前面。

 使用方法：示例

1.z-index僅對定位元素有效（position:relative||absolute||fixed）;

2.z-index只可比較同級元素。

5、position:relative和負margin均可以使元素位置發生偏移?兩者有什麼區別？

position:relative和負margin均可以使元素位置發生偏移，（都不會脫離文檔流）兩者的區別表如今：

          1.負margin會使元素在文檔流中的位置發生偏移，它會放棄偏移以前佔據的空間，緊挨其後的元素會填充這部分空間；

          2.相對定位後元素位置發生偏移，它仍會堅守原來佔據的空間，不會讓文檔流的其餘元素流入。

 、

6、浮動元素有什麼特徵？對其餘浮動元素、普通元素、文字分別有什麼影響?

　　　浮動元素的特徵有：

　　　　　1.塊元素優先在一排顯示；

　　　　　2.內聯元素支持寬高；

　　　　   3.不管是塊元素仍是內聯元素，沒有寬度時默認內容撐開寬度；

　　　　   4.脫離文檔流；

　　　　　5.提高層級半級（z-index）

　　　形成的影響：

　　　　　對其餘浮動元素的影響：後浮動的元素永不會超過先浮動元素的頂端。

　　　　　浮動的元素只會覆蓋後面的塊級元素，不影響前邊的塊級元素。

　　　　　對普通元素的影響：浮動元素會脫離正常的文檔流，使得緊挨它的元素位置發生偏移，影響佈局。

　　　　　對文字的影響：浮動元素向下延伸時，不會影響正常文本的顯示，文本會相對於浮動元素進行偏移。但部分文本背景會被浮動元素遮住。

                

 7、清除浮動的方法

　　若是一個父盒子中有一個子盒子，而且父盒子沒有設置高，子盒子在父盒子中進行了浮動，那麼未來父盒子的高度爲0.因爲未來父盒子的高度爲0，下面的元素會自動補位，因此這個時候要進行浮動的清除。clear:both

　　1.使用額外標籤法：

　　在浮動的盒子之下再放一個標籤，在這個標籤中使用clear:both,來清除浮動對頁面的影響。

　　.clearfix {clear:both;}

　　<div class="clearfix"></div>

　　a.內部標籤：會將這個浮動盒子的父盒子高度從新撐開

　　b.外部標籤：會將這個浮動盒子的影響清除，可是不會撐開盒子。

　　注意：通常狀況下不會使用這一種方式來清除浮動。由於這個清除浮動的方式會增長頁面的標籤。

　　2.使用overflow屬性來清除浮動：

　　先找到浮動盒子的父元素，再在父元素中添加一個屬性，就是清除這個父元素中的子元素浮動對頁面的影響。

　　overflow：hidden；

　　3.使用僞元素(給父元素)來清除浮動：

　　.clearfix::after {
　　　　       content: "";//添加內容爲空

                    height: 0;//內容高度爲0

                    line-height: 0;//內容文本的高度爲0

                    display: block;//將文本設置爲塊級元素

                    clear: both;//清除浮動

                    visibility: hidden;//將元素隱藏

           }

           .clearfix {

                    zoom: 1;/*爲了兼容ie6*/

           }

 

參考做者（betterwlf）    http://www.cnblogs.com/wlf1112/p/6245502.html

參考做者 （Thinkguo） http://www.cnblogs.com/thinkguo/p/6223530.html#top