使用css布局網頁，那是前端的基本功了，什麼兩欄布局，三欄布局，那也是前端面試的基本題了。一般來說，可以使用cssposition屬性進行布局，或者使用cssfloat屬性布局。前者適合布局首頁，因為首頁上的內容往往可以完全控制。後者適合布局模板，模板中填充的內容你沒法控制——比如，在編輯wordpress模板時，你肯定沒法考慮每篇博文的長度。這篇博文，就是總結一下怎樣使用css中的float屬性進行布局，其實網上有很多討論這個話題的文章了，但我覺得都沒說到點子上。那就來老生常談一次吧，css之float布局。
布局的基本html元素div，有這麼幾個特點，會影響到後面進行的布局。注意，下面的特點僅適用於沒有指定width屬性和height屬性的div，因為在用float進行布局的過程中，我們只有在特定的位置（後面會詳述）才這麼做。
網上的很多教程，經常指定了div的寬度或高度，然後講解float屬性，這對我學習布局確實產生了很大干擾。記住，只有在特定的位置，我們才會指定div的寬度。
在實踐過程中，我領悟到一點，那就是，div是按照在html文件中的順序進行渲染的。也就是說，我們先決定前乙個div在頁面上的位置，然後再決定後乙個div的位置。也許這一點是顯而易見的，但它確實是理解float布局的關鍵，網上其他教程裡很少有提及。
有下面這樣的html文件
doctype一共5個>
<
html
>
<
head
>
<
style
type
="text/css"
>
#header
#content
#sidebar
#sidebar2
#footer
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
>
div，為了使這些div具有高度和寬度，向其中新增了一些文字。現在還沒有任何float屬性，所以每個div都佔滿了整個父元素的寬度，而高度由其中的內容決定。渲染效果如下：
當乙個元素具有float屬性時，瀏覽器會怎樣做？我想是這樣的：
渲瀏覽器探測到這個元素具有float:right屬性，
根據其內容限制了div的寬度（而不是盡量佔滿父元素寬度）
脫離文件流，並選擇這樣的位置進行渲染：
首先要在文件流沒有占領的區域，否則就有可能覆蓋已經渲染的文件。
其次，也沒有其他float元素。
最後，渲染之後不會影響文件流。文件流該怎麼走還怎麼走，但是文件中的內容會自動繞開float元素。
試著將div#sidebar設定float:left屬性：
側邊欄沒有浮動到標題欄上，即使標題欄右側沒有文字。這是因為標題欄的渲染在側邊欄之前進行，瀏覽器渲染完標題欄後已經忘了標題欄右側有沒有內容了，所以不能冒著覆蓋原來的內容的風險將側邊欄浮動到標題欄上。接著，文件流該怎麼渲染還是怎麼渲染，除了其中文字繞開浮動元素，就好像浮動元素不存在一樣。
我們希望側邊欄2在頁面左側，側邊欄1在頁面右側。因為側邊欄2中內容很多，所以需要限定寬度。為了美觀，同時限定1的寬度，並對側邊欄2賦float屬性。
有點像乙個三欄布局的樣子了。但我們通常不希望中欄高於側邊欄時，延伸到側邊欄下方。這時通常使用的技巧就是給中欄帶margin屬性，左右的值就是兩個側邊欄的值。
很好，乙個三欄布局就完成了。雖然看上去很好，但是如果中欄的高度小於側邊欄會怎樣？把中欄裡的內容都刪掉大部分，然後：
見鬼，頁尾上去了……這可不是我希望的。那麼還有乙個技巧，就是在頁尾使用clear屬性。這個屬性的作用就是，使文件流中元素在布局的時候，不允許左側或右側出現浮動元素。如果有，則在浮動元素的下方進行渲染。這裡，為頁尾新增clear屬性。
頁尾也正常了，這樣，乙個三欄布局就最終完成了。
最後，再來看乙個例子吧，這個例子將解釋兩個問題：
當可渲染區域去除掉已有的浮動元素，剩下的那一塊區域，其頂部不足以容納浮動元素時，浮動元素將放棄渲染在頂部，而渲染在前面那個浮動元素的下方。
在以上的情況下，兩個浮動元素仍然不在文件流中，可能會產生一些詭異的現象。
恢復中欄的內容，並改寫css**如下：
這張圖就清晰地說明了浮動元素其實是不在文件流之中的。首先，瀏覽器頁面沒有500畫素寬，所以側邊欄2沒法在頂部渲染（側邊欄1的存在使空間不夠了），這時文件流僅僅進行到標題欄。因此中欄從標題欄下方開始渲染，為了繞開兩個側邊欄，只好先在左上角寫幾個字，然後到側邊欄2右側憋屈地渲染，最後才正常地舒展開（你可以這樣想象，綠色和藍色的後面，其實是沒有文字的紅色）。
css布局float浮動布局詳解
float屬性 頁面布局時主要採用 浮動 float 和定位 position 還有就是即不浮動也不定位的正常文件流結構三種 float屬性常用的語法是 float left right none 任何元素都可以被浮動，無論是塊元素div，ol，ul還是行內元素span strong都可以浮動，重要...
CSS布局 四 float詳解
因為float被設計出來的初衷是用於 文字環繞效果。即，乙個一段文字，float left之後，文字會環繞。阿斯利康大家啊勝利大街拉速度來喀什建檔立卡結算單 2.1.破壞性 首先大家來看兩個demo，如下圖。第乙個demo是乙個簡單不過的例子，顯示效果也很正常。第二個demo，唯一的區別就在於 加了...
CSS布局與定位,flow流,float
web頁面布局分為 流體布局liquid layouts 無論瀏覽器調整到多大寬度,布局都會擴充套件,填滿整個瀏覽器。凍結布局fozen layouts 凍結布局會鎖定元素使之讓它們凍結在頁面上,以此可避免視窗擴充套件帶來的許多問題 慕課 在網頁中，元素有三種布局模型 1 流動模型 flow 2 浮...