這篇文章主要介紹“CSS浮動布局及文檔流是什么”，在日常操作中，相信很多人在CSS浮動布局及文檔流是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS浮動布局及文檔流是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

為南樂等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及南樂網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為網(wǎng)站設計制作、網(wǎng)站設計、南樂網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

文檔流簡介

什么叫“文檔流”？簡單來說，就是指元素在頁面中出現(xiàn)的先后順序?？煞譃椤罢Ｎ臋n流”和“脫離文檔流”。

1、正常文檔流

正常文檔流，又稱為“普通文檔流”或“普通流”，也就是W3C標準所說的“normal flow”。正常文檔流的簡單定義是：“正常文檔流，將一個頁面從上到下分為一行一行的，其中塊元素獨占一行，相鄰行內(nèi)元素在每一行中按照從左到右排列直到該行排滿。”即，正常文檔流指的就是默認情況下頁面元素的布局情況。

如p、p、hr都是塊元素，因此獨占一行。而span、i、img都是行內(nèi)元素，因此如果兩個行內(nèi)元素相鄰，就會位于同一行，并且從左到右排列。

2、脫離文檔流

脫離文檔流，指的是脫離正常文檔流。而想要改變正常文檔流，可以使用兩種方法：浮動和定位。

正常文檔流效果：

    
    
    
    
    
    
        
box1
        
box2
        
box3
    

設置浮動后的效果：
當我們?yōu)榈诙?、三個p元素設置左浮動時：正常文檔流情況下，p是塊元素，會獨占一行。但是由于設置了浮動，第二、三個p元素卻是并列一行，并且跑到父元素之外，跟正常文檔流不一樣。也就是說，設置浮動使得元素脫離了正常文檔流。

設置定位后的效果：
當我們?yōu)榈谌齻€p元素設置絕對定位的時候：由于設置了定位，第三個p元素跑到父元素的上面去了。也就是說，設置了定位使得元素脫離了文檔流。

浮動

在傳統(tǒng)的印刷布局中，文本可以按照實際需要來圍繞圖片，我們一般把這種方式稱為“文本環(huán)繞”。在前端開發(fā)中，使用了浮動的頁面元素其實就像在印刷布局里被文字包圍的圖片一樣。這樣比喻，就很好理解了。浮動是CSS布局的最佳利器，我們可以通過浮動來靈活地定位頁面元素，以達到布局網(wǎng)頁的目的。例如我們可以通過設置float屬性讓元素向左浮動或者向右浮動，以便讓周圍的元素或文本環(huán)繞著這個元素。

float屬性取值只兩2個：

我們再次用到上文的例子：

    
    
    
    
    
    
        
box1
        
box2
    

接下來我們分別為box1添加左浮動，為box2添加右浮動：

.son1{float: left;}
.son2{float: right;}

由上述例子可見浮動會影響周圍元素，并且還會引發(fā)很多意想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。

clear屬性取值如下：

在實際開發(fā)中，我們幾乎不會使用“clear:left;”或“clear:right;”來單獨清除左浮動或右浮動，往往都是直截了當?shù)厥褂谩癱lear:both;”來清除所有浮動。在上述例子的基礎上我們對浮動進行清除：

    
    
    
    
    
    
        box1

        box2

        
    

我們一般都是在浮動元素后面再增加一個空元素，然后為這個空元素定義clear:both;來清除浮動。在實際開發(fā)中，使用浮動之后如果發(fā)現(xiàn)有什么不對勁的地方，首先檢查有沒有清除浮動。事實上，清除浮動不僅僅只有clear:both;，還有overflow:hidden，以及更為常用的偽元素。

到此，關于“CSS浮動布局及文檔流是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
文章標題：CSS浮動布局及文檔流是什么
本文URL：http://weahome.cn/article/gcsggs.html