網頁布局的本質——用css來擺放盒子。把盒子擺到相應位置.
css提供了三種傳統布局方式(簡單說，就是盒子如何進行排列順序)：
這三種布局方式都是用來擺放盒子的，盒子擺到合適位置，布局自然就完成了。
注意：實際開發中，乙個頁面基本都包含了這三種布局方式.
所謂的標準流：就是標籤按照規定好預設方式排列。
塊級元素會獨佔一行，從上向下順序排列。
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。
以上都是標準流布局，我們前面學習的就是標準流，標準流是最基本的布局方式。
總結：有很多的布局效果，標準流沒有辦法完成，此時就可以利用浮動完成布局。因為浮動可以改變元素標籤預設的排列方式。
浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。
網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
網頁布局第二準則：先設定盒子大小，之後設定盒子的位置。
float屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。
語法：
選擇器描述none
元素不浮動（預設值）
left
元素向左浮動
right
元素向右浮動
示例**
左青龍右白虎
加入了浮動之後的元素，會具有很多特性：
浮動元素會脫離標準流
浮動的元素會一行內顯示並且元素頂部對齊
浮動的元素會具有行內塊元素的特性
5.1 浮動元素會脫離標準流
設定了浮動 ( float ) 的元素最重要特性：
脫離普通流的控制 ( 浮 ) 移動到指定位置 ( 動 ) ，俗稱脫標
浮動的盒子不再保留原先的位置
正常標準流顯示
浮動脫標後
示例**
浮動的盒子
標準流的盒子
如果多個盒子都設定了浮動，則它們會按照屬性值一行內顯示並且頂端對齊排列。
注意：浮動的元素是互相貼靠在一起的 ( 不會有縫隙 ) ，如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊。
示例**
12
34
若縮小視窗，則
5.3 浮動元素具有行內塊元素特性
任何元素都可以浮動。不管原先是什麼模式的元素，新增浮動之後具有行內塊元素相似的特性。
示例**
12
divppppppppp
為了約束浮動元素位置，我們網頁布局一般採取的策略是：
先用標準流的父元素排列上下位置，之後內部子元素採取浮動排列左右位置。符合網頁布局第一準則。
示例**1
左側右側
示例**2
示例**3
左青龍123
4567
8
css學習 css浮動
1 文件流介紹 網頁布局的核心就是利用css來擺放盒子，把盒子擺放在合適的位置。css的定位機制有以下3種 網頁布局一般需要3種搭配使用 a 普通流 標準流 b 浮動 1 浮動只有左右。2 浮動後找離他最近的父元素靠左 右對齊。3 乙個父盒子裡的子盒子，如果其中乙個子元素有浮動的話，則其他子元素都需...
CSS學習筆記 浮動
float left float right float none css的float 屬性可以使乙個元素脫離正常的文件流，然後被安放到它所在容器的的左端或者右端，並且其他的文字和行內元素圍繞它安放。除了left和right，float還有乙個屬性 none，用來防止元素浮動。有一些列特定規則控制著...
前端學習 Css 浮動
塊元素在文件流中預設垂直排列，所以這個三個div自上至下依次排開，如果希望塊元素在頁面中水平排列，可以使塊元素脫離文件流。使用float來使元素浮動，從而脫離文件流 可選值 none，預設值，元素預設在文件流中排列。left，元素會立即脫離文件流，向頁面的左側浮動。right，元素會立即脫離文件流，...