文檔流
先說說什麼是文檔流 流是什麼 就是一串連續的東西
<div style="background-color:pink;width:40px;height:80px;">第一個框 </div>
<div style="background-color:red;width:40px;height:80px;">第二個框 </div>
<div style="background-color:yellow;width:40px;height:80px;">第三個框 </div>
<span>我換行</span>
<span>我不換行</span> 
我們寫在html裡面的元素 系統會放在資料流裡依次讀取 按照從左到右從上到下的順序 放置在頁面上
當然在放置的過程中 牽扯到行内元素與塊級元素的概念
簡單說明一下
塊級元素: 如div 每一個div元素占據一行 如果沒有設定寬度 就預設放滿整行 如果指定了寬度 即使寬度再小 後面的元素也得另起一行放置
行内元素:如span不會換行 舉個例子如A是行内元素 後面的元素就放在A的右邊而不是下邊
浮動
說完了文檔流 再說說浮動
在上面的例子裡 三個div都是塊級元素 一個占一行 可問題是 我就想讓他們的布局如下 怎麼辦
先看代碼
<div style="background-color:pink;width:40px;height:80px;float:left;"></div>
<div style="background-color:red;width:80px;height:80px;"></div>
<div style="background-color:yellow;width:40px;height:80px;"> </div>
<span>我換行</span>
<span>我不換行</span> 大家看第一行的代碼裡 多了一個float:left
它的意思就是說讓這個元素脫離文檔流的限制 把他"浮動"到包裹他的容器的最左邊 (此時在文檔流裡就沒有它的存在了)
現在在看 那三個div的寬度參數 深紅色的寬度是80 我們隻看到了右邊的40 左邊的40個像素被在文檔流之外的粉紅色div擋住了
這個圖的代碼如下
<div style="float:left;background-color:pink">
<span>dd</span>
<select name="general.language">
<option value="volo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div style="background-color:blue">LLL </div>
<div style="background-color:green"> asdf</div>
<div style="background-color:yellow;" > ddddd</div>
<div> eeee </div> 如果大家用的是chrome的浏覽器打開審查元素會看到
其實藍色的111div是從頂行放置的 粉紅色的div放在它上面 擋住了一部分
(lll asdf 居中列印了 同一段代碼在editplus與chrome顯示不一樣 應該是解釋的機制不同吧)
這也符合上面我們說的文檔流的理論: 哪個元素有了float屬性 就把他取出文檔流 而文檔流内部的元素就放置在自己應該在的位置上
可問題是我想讓asdf也頂行寫不行嗎?
這就牽扯到float的詳細布局方式了 告訴大家一句話
假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟随在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是标準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。
div的順序是HTML代碼中div的順序決定的。
靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是後。
那有另一個問題了,如果a本身不是浮動的呢? 鑽牛角尖了吧,如果a不是浮動的,那它就還在文檔流裡面呗!就是下面這個圖的大紅色塊說明的道理
如果還是不明白,自己敲幾行代碼,看看效果就ok
分析咱們的頁面LLL的前面元素有浮動标簽 就把LLL放在前邊元素的右邊
asdf的上一個元素是LLL 是以asdf就放在LLL的正下方 也就是我們圖中的效果
那怎麼辦?
clear
clear : none | left | right | both
取值：
none : 預設值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
clear本身就是清除元素本身的浮動效果的
我們在asdf上加上clear:left就ok了