網頁布局的核心就是使用css來擺放盒子普通流（標準流） 塊級元素會獨佔一行，從上向下順序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行； 常用元素：span、a、i、em等
浮動 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
定位 將盒子定在瀏覽器的某乙個位置。
讓多個盒子(div) 水平排列成一行雖然行內塊(inline-block) 也可以實現多個元素一行顯示，但是元素中間會有縫隙，並且不能實現盒子的左右對齊。實現盒子的左右對齊
概念：
元素的浮動是指設定了浮動屬性的元素會：作用：脫離標準普通流的控制
移動到指定位置。
讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。可以實現盒子的左右對齊等等…
浮動最早是用來控制，實現文字環繞的效果。
選擇器描述none
元素不浮動（預設值）
left
元素向左浮動
right
元素向右浮動
特點說明
浮加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面。
漏加了浮動的盒子是不佔位置的，它原來的位置漏給了標準流的盒子。
特特別注意：浮動元素會改變display屬性， 類似轉換為了行內塊，但是元素之間沒有空白縫隙
1). 浮動元素與父盒子的關係
子盒子的浮動參照父盒子對齊 不會與父盒子的邊框重疊，也不會超過父盒子的內邊距2). 浮動元素與兄弟盒子的關係
在乙個父級盒子中，如果前乙個兄弟盒子是：
·浮動的，那麼當前盒子會與前乙個盒子的頂部對齊；3). 注意·普通流的，那麼當前盒子會顯示在前乙個兄弟盒子的下方。
·浮動只會影響當前的或者是後面的標準流盒子，不會影響前面的標準流。·如果乙個盒子裡面有多個子盒子，如果其中乙個盒子浮動了，其他兄弟也應該浮動。防止引起問題
·因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最後父級盒子高度為0，就影響了下面的標準流盒子。·由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響。
·準確地說，並不是清除浮動，而是清除浮動後造成的影響
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之後， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
選擇器 clear 清除描述left
不允許左側有浮動元素（清除左側浮動的影響）
right
不允許右側有浮動元素（清除右側浮動的影響）
both
同時清除左右兩側浮動的影響
什麼時候清除浮動
父級沒高度清除方式方式子盒子浮動了
影響下面布局了，我們就應該清除浮動了。
優點缺點
額外標籤法（隔牆法）
通俗易懂，書寫方便
新增許多無意義的標籤，結構化較差。
父級overflow:hidden;
書寫簡單
父級overflow:hidden; 書寫簡單 溢位隱藏
父級after偽元素
結構語義化正確
由於ie6-7不支援:after，相容性問題
父級雙偽元素
結構語義化正確
由於ie6-7不支援:after，相容性問題
css布局之浮動
css布局中說到浮動，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動 框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。一float屬性的定義和用法 float屬性 設定元素浮動 可能的值 none 不浮動，在文件流內，預設 left ...
CSS之浮動布局
1.什麼是浮動 在我們布局的時候用到的一種技術，能夠方便我們進行布局，通過讓元素浮動，我們可以使元素在水平上左右移動，再通過margin屬性調整位置。2.浮動的原理 使當前元素脫離普通流，相當於浮動起來一樣，浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另乙個浮動的邊緣 3 浮動的生成 使用cs...
CSS布局之浮動 清除浮動
1.2 浮動 float 小結 1.3 浮動 float 的應用 重要 1.4 浮動 float 的擴充套件 2.清除浮動 2.4 清除浮動總結 概念 元素的浮動是指設定了浮動屬性的元素會 脫離標準普通流的控制 移動到指定位置。作用 讓多個盒子 div 水平排列成一行，使得浮動成為布局的重要手段。可...