CSS佈局：Float佈局過程與老生常談的三欄佈局

時間 2019-11-12

原文原文鏈接

原文見博客主站，歡迎你們去評論。css

使用CSS佈局網頁，那是前端的基本功了，什麼兩欄佈局，三欄佈局，那也是前端面試的基本題了。通常來講，可使用CSSposition屬性進行佈局，或者使用CSSfloat屬性佈局。前者適合佈局首頁，由於首頁上的內容每每能夠徹底控制。後者適合佈局模板，模板中填充的內容你無法控制——好比，在編輯wordpress模板時，你確定無法考慮每篇博文的長度。這篇博文，就是總結一下怎樣使用CSS中的float屬性進行佈局，其實網上有不少討論這個話題的文章了，但我以爲都沒說到點子上。那就來老生常談一次吧，CSS之Float佈局。html

DIV的特色

佈局的基本HTML元素div，有這麼幾個特色，會影響到後面進行的佈局。注意，下面的特色僅適用於沒有指定width屬性和height屬性的div，由於在用float進行佈局的過程當中，咱們只有在特定的位置（後面會詳述）才這麼作。前端

空的div是沒有高度的。
有內容的div其高度取決於內容的高度。
若是沒有指定float屬性，div的寬度將和佔滿父元素的寬度（不論是不是空的）。
若是指定了float屬性，div的寬度將取決於內部元素的寬度（因此，空的div指定了float屬性後既沒有高度也沒有寬度）。

網上的不少教程，常常指定了div的寬度或高度，而後講解float屬性，這對我學習佈局確實產生了很大幹擾。記住，只有在特定的位置，咱們纔會指定div的寬度。面試

Float佈局的過程

在實踐過程當中，我領悟到一點，那就是，div是按照在HTML文檔中的順序進行渲染的。也就是說，咱們先決定前一個div在頁面上的位置，而後再決定後一個div的位置。也許這一點是顯而易見的，但它確實是理解Float佈局的關鍵，網上其餘教程裏不多有說起。瀏覽器

有下面這樣的HTML文檔ide

<!DOCTYPE>
    <html>
    <head>
    <style type="text/css">
        #header{background-color: gray;}
        #content{background-color: red;}
        #sidebar{background-color: blue;}
        #sidebar2{background-color: green;}
        #footer{background-color: yellow;}
    </style>
    </head>
    <body>
    <div id="page">
        <div id="header"><h1>這裏是標題</h1></div>
        <div id="sidebar">
            <p>側邊欄</p>
        </div>
        <div id="sidebar2">
            <p>側邊欄2：地圖投影，是將地球表面投影到地圖平面的過程，將地理座標轉換爲平面直角坐
            標的過程。由於畢業論文須要，我從新回顧了一下地圖投影的知識而且做了比較全面且簡潔的總
            結。若是你以前未系統瞭解過地圖投影，又對地圖投影感興趣，這篇博文也許能成爲一篇簡潔務
            實的閱讀材料。</p>
        </div>
        <div id="content">
            <p>這裏是一些文字</P>
            <p>再來一大段文字</P>
            <p>地圖投影，是將地球表面投影到地圖平面的過程，將地理座標轉換爲平面直角座標的過程。
            由於畢業論文須要，我從新回顧了一下地圖投影的知識而且做了比較全面且簡潔的總結。若是你
            以前未系統瞭解過地圖投影，又對地圖投影感興趣，這篇博文也許能成爲一篇簡潔務實的閱讀材
            料。</p>
        </div>
        <div id="footer"><p>沒人關注的頁腳</P></div>
    </div>
    </body>
    </html>

一共5個div，爲了使這些div具備高度和寬度，向其中添加了一些文字。如今尚未任何float屬性，因此每一個div都佔滿了整個父元素的寬度，而高度由其中的內容決定。渲染效果以下：wordpress

當一個元素具備float屬性時，瀏覽器會怎樣作？我想是這樣的：佈局

渲瀏覽器探測到這個元素具備float:right屬性，
根據其內容限制了div的寬度（而不是儘可能佔滿父元素寬度）
脫離文檔流，並選擇這樣的位置進行渲染：
1. 首先要在文檔流沒有佔領的區域，不然就有可能覆蓋已經渲染的文檔。
2. 其次，也沒有其餘float元素。
3. 最後，渲染以後不會影響文檔流。文檔流該怎麼走還怎麼走，可是文檔中的內容會自動繞開float元素。

試着將div#sidebar設置float:left屬性：學習

#sidebar{
        float: right;
    }

側邊欄沒有浮動到標題欄上，即便標題欄右側沒有文字。這是由於標題欄的渲染在側邊欄以前進行，瀏覽器渲染完標題欄後已經忘了標題欄右側有沒有內容了，因此不能冒着覆蓋原來的內容的風險將側邊欄浮動到標題欄上。接着，文檔流該怎麼渲染仍是怎麼渲染，除了其中文字繞開浮動元素，就好像浮動元素不存在同樣。spa

咱們但願側邊欄2在頁面左側，側邊欄1在頁面右側。由於側邊欄2中內容不少，因此須要限定寬度。爲了美觀，同時限定1的寬度，並對側邊欄2賦float屬性。

    #sidebar{
        float: right;
        width: 100px;
    }
    #sidebar2{
        float: left;
        width: 180px;
    }

有點像一個三欄佈局的樣子了。但咱們一般不但願中欄高於側邊欄時，延伸到側邊欄下方。這時一般使用的技巧就是給中欄帶margin屬性，左右的值就是兩個側邊欄的值。

    #sidebar{
        float: right;
        width: 100px;
    }
    #sidebar2{
        float: left;
        width: 160px;
    }
    #content{
        margin-left: 160px;
        margin-right: 100px;
    }

很好，一個三欄佈局就完成了。雖然看上去很好，可是若是中欄的高度小於側邊欄會怎樣？把中欄裏的內容都刪掉大部分，而後：

見鬼，頁腳上去了……這可不是我但願的。那麼還有一個技巧，就是在頁腳使用clear屬性。這個屬性的做用就是，使文檔流中元素在佈局的時候，不容許左側或右側出現浮動元素。若是有，則在浮動元素的下方進行渲染。這裏，爲頁腳添加clear屬性。

    #sidebar{
        float: right;
        width: 100px;
    }
    #sidebar2{
        float: left;
        width: 160px;
    }
    #content{
        margin-left: 160px;
        margin-right: 100px;
    }
    #footer{
        clear: both;
    }

頁腳也正常了，這樣，一個三欄佈局就最終完成了。

最後，再來看一個例子吧，這個例子將解釋兩個問題：

當可渲染區域去除掉已有的浮動元素，剩下的那一塊區域，其頂部不足以容納浮動元素時，浮動元素將放棄渲染在頂部，而渲染在前面那個浮動元素的下方。
在以上的狀況下，兩個浮動元素仍然不在文檔流中，可能會產生一些詭異的現象。

恢復中欄的內容，並改寫CSS代碼以下：

    #sidebar{
        float: right;
        width: 200px;
    }
    #sidebar2{
        float: left;
        width: 300px;
    }

這張圖就清晰地說明了浮動元素實際上是不在文檔流之中的。首先，瀏覽器頁面沒有500像素寬，因此側邊欄2無法在頂部渲染（側邊欄1的存在使空間不夠了），這時文檔流僅僅進行到標題欄。所以中欄從標題欄下方開始渲染，爲了繞開兩個側邊欄，只好先在左上角寫幾個字，而後到側邊欄2右側憋屈地渲染，最後才正常地舒展開（你能夠這樣想象，綠色和藍色的後面，實際上是沒有文字的紅色）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。