主頁：主頁-冰山一樹sankey
csdn主頁：csdn主頁-冰山一樹sankey
網頁布局的本質——用 css 來擺放盒子。 把盒子擺放到相應位置.
css 提供了三種傳統布局方式(簡單說,就是盒子如何進行排列順序)：
所謂的標準流: 就是標籤按照規定好預設方式排列
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。
以上都是標準流布局，標準流是最基本的布局方式。
這三種布局方式都是用來擺放盒子的，盒子擺放到合適位置，布局自然就完成了。
注意：實際開發中，乙個頁面基本都包含了這三種布局方式（不過移動端有新的布局方式） 。
總結： 有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。 因為浮動可以改變元素標籤預設的排列方式.
浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。
網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
float 屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。
語法：
選擇器描述none
元素不浮動(預設值)
left
元素向左浮動
right
元素向右浮動
1.5.1 脫標
設定了浮動（float）的元素最重要特性：
脫離標準普通流的控制（浮） 移動到指定位置（動）, （俗稱脫標）
浮動的盒子不再保留原先的位置
1.5.2 對齊排列
如果多個盒子都設定了浮動，則它們會按照屬性值一行內顯示並且頂端對齊排列。
注意： 浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊。
1.5.3 行內塊特性
浮動元素會具有行內塊元素特性。
為了約束浮動元素位置, 我們網頁布局一般採取的策略是:
先用標準流的父元素排列上下位置, 之後內部子元素採取浮動排列左右位置. 符合網頁布局第一準側.
由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最後父級盒子高度為 0 時，就會影響下面的標準流盒子。
清除浮動本質
額外標籤法也稱為隔牆法，是 w3c 推薦的做法。
父級新增 overflow 屬性
父級新增after偽元素
父級新增雙偽元素
2.2.1 額外標籤法
額外標籤法也稱為隔牆法，是 w3c 推薦的做法。
額外標籤法會在浮動元素末尾新增乙個空的標籤。例如
，或者其他標籤（如
等）。
選擇器描述left
不允許左側有浮動元素(清除左側浮動的影響)
right
不允許右側有浮動元素(清除右側浮動的影響)
both
同時清除左右兩側浮動的影響
2.2.2 父級新增overflow
可以給父級新增 overflow 屬性，將其屬性值設定為 hidden、 auto 或 scroll 。
子不教,父之過,注意是給父元素新增**
2.2.3 :after 偽元素法
:after 方式是額外標籤法的公升級版。也是給父元素新增
.clearfix:after
.clearfix
新增這個**，然後給主盒子新增class名clearfix
也是給給父元素新增
常見布局注意點浮動和標準流的父盒子搭配。先用標準流的父元素排列上下位置, 之後內部子元素採取浮動排列左右位置
乙個元素浮動了，理論上其餘的兄弟元素也要浮動。
乙個盒子裡面有多個子盒子，如果其中乙個盒子浮動了，那麼其他兄弟也應該浮動，以防止引起問題。 浮動的盒子只會影響浮動盒子後面的標準流,不會影響前面的標準流.
建議遵循以下順序（書寫優先順序由上到下）：
屬性型別
具體屬性
布局定位屬性
display / position / float / clear / visibility / overflow（建議 display 第乙個寫，畢竟關係到模式）
自身屬性
width / height / margin / padding / border / background
文字屬性
color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（css3）
content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
浮動布局所帶來的影響以及如何清除浮動
在頁面的布局過程中浮動是個好東西，我們經常會用到浮動布局，它可以使元素共享一行，極大的方便了我們的布局過程。但是很多人可能只是會用，對浮動的原理只是一知半解，如果沒有清晰的認識到浮動所帶來的影響以及如何清除浮動所帶來的影響，那麼面對 量龐大的頁面將會變得一頭霧水。所以接下來我們來深入學習一下浮動布局...
浮動 清除浮動 盒子布局
div table,td table,td 單獨設定表的左和上邊框,然後設定td的右和下邊框,也可以避免重複問題 table td.a aa hover ddiv div a1.a2 sup sub father big small footer clear father big small foo...
CSS浮動以及清除浮動
傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中，乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框，將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...