先說說什麼是文件流 流是什麼 就是一串連續的東西
第乙個框
第二個框
第三個框
我換行我不換行
當然在放置的過程中 牽扯到行內元素與塊級元素的概念
簡單說明一下
塊級元素: 如div 每乙個div元素佔據一行 如果沒有設定寬度 就預設放滿整行 如果指定了寬度 即使寬度再小 後面的元素也得另起一行放置
行內元素:如span不會換行 舉個例子如a是行內元素 後面的元素就放在a的右邊而不是下邊
說完了文件流 再說說浮動
在上面的例子裡 三個div都是塊級元素 乙個佔一行 可問題是 我就想讓他們的布局如下 怎麼辦
先看**
我換行我不換行
大家看第一行的**裡 多了乙個float:left
它的意思就是說讓這個元素脫離文件流的限制 把他"浮動"到包裹他的容器的最左邊 (此時在文件流裡就沒有它的存在了)
現在在看 那三個div的寬度引數 深紅色的寬度是80 我們只看到了右邊的40 左邊的40個畫素被在文件流之外的粉紅色div擋住了
這個圖的**如下
dd
volvo
saab
fiat
audi
lll
asdf
ddddd
eeee
如果大家用的是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 : none | left | right | both
取值：none : 預設值。允許兩邊都可以有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
both : 不允許有浮動物件
clear本身就是清除元素本身的浮動效果的
我們在asdf上加上clear:left就ok了
CSS布局文件流
文件流是文件中可顯示物件在排列時所占用的位置。css定位大致可以分成三類模型 普通流模型 浮動模型 和定位模型 普通文件流 顧名思義，普通流中的元素的位置由在html中的位置決定，根據上下級和前後的順序，乙個乙個的排列在介面上 當然根據元素的型別不一樣，排列的方式會不一樣，但先後順序，顯示層次關係不...
前端 CSS文件流
css的定位機制有3種 普通流浮動 float left right none 和 定位 position static relative absolute 普通流 正常的文件流 在html 裡面的寫法就是從上到下，從左到右的排版布局.塊元素乙個接著乙個,填滿瀏覽器視窗或其他視窗元素的所有可用寬度....
CSS脫離文件流
脫離文件流 也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文件流的元素不存在而進行定位。需要注意的是，使用float脫離文件流時，其他盒子會無視這個元素，但其他盒子內的文字依然會為這個元素讓出位置，環繞在周圍。其他盒子與其他盒子內的文字都會無視它。float 如上圖 div2實...