網頁布局的本質——用css來擺放盒子。把盒子擺放在相應的位置。
css提供了三種傳統布局方式：
1、普通流（標準流）
2、浮動
3、定位
所謂的標準流：就是標籤按照規定好預設方式排列
1、塊級元素會獨佔一行，從上向下順序排列
2、行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行
3、常用元素
這三種布局方式都是用來擺放盒子的，盒子擺放到合適位置，布局自然就完成了
注意：實際開發中，乙個頁面基本包含了著三種布局方式
有很多的布局效果，標準流沒有辦法完成，此時可以利用浮動完成布局。因為浮動可以改變元素標籤預設的排列方式
浮動最典型的應用：可以讓多個塊級元素一行內排列顯示
網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動
float 屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。
1、浮動元素會脫離標準流（脫標）
2、浮動的元素會一行內顯示並且元素頂部對齊
3、浮動元素會具有行內塊元素的特性
設定浮動（float）元素最重要特性：
1、脫離標準普通流的控制（浮）移動到指定位置（動），俗稱（脫標）
2、浮動的盒子不再保留原先的位置
3、如果多個盒子都設定了浮動，它們會按照屬性值一行內顯示並且頂端對齊排列
注意：浮動的元素是相互貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動盒子，多出來的盒子會另起一行對齊
4、浮動元素會具有行內塊元素特性
任何元素都可以浮動，不管原先是什麼模式的元素，新增浮動之後具有行內塊元素相似的特性
例子：
5、浮動元素經常和標準流父級搭配使用
為了約束浮動元素位置，我們網頁布局一般採用的策略是：
先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置，符合網頁布局第一準則。
（ps：引自pink老師~，剛剛開始作為自己的學習筆記寫，如有不好請見諒，阿里嘎多）
[^1]：
CSS入門基礎知識（十五） 清除浮動
額外標籤法 額外標籤法也稱為隔牆法，是w3c推薦的做法 額外標籤法會在浮動元素末尾新增乙個空的標籤。例如 div style clear both div 或者其他標籤 如 br 等 優點 通俗易懂，書寫方便 缺點 新增許多無意義的標籤，結構化較差 注意 要求這個新的空標籤必須是塊級元素 清除浮動 ...
CSS入門筆記十三 浮動
常見網頁元素模式 a.標準流 即標籤按照預設規則顯示 b.浮動 調控盒子位置 c.固定 注意 網頁通常由這三種布局共同作用。網頁布局第一準則 多個塊級元素縱向排列用標準流，橫向排列用浮動 浮動語法 浮動特性 a.浮動元素會脫離標準流 脫標 b.浮動的盒子不再保留原來的位置 c.浮動的盒子會在一行顯示...
CSS基礎知識總結之浮動詳解
前言 day4主要講述了乙個重點，那就是浮動 其中包含，什麼是浮動？浮動的作用語法及浮動的清除等 1 css的三種布局機制 css 提供了 3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 1 普通流 標準流 常用元素 div hr p h1 h6 ul ol dl form ...