在No.4中談及了下盒子模型，引出布局模型

1、布局模型有三類：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1）流動模型 ?flow（默認）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2）浮動模型 ?float

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3）層模型 ?layer ?

2、文檔流 ：指的是文本沿著從左到右的方向展開，就像流的形式

? ?脫離文檔流指的是一個元素脫離文檔流之后，其他元素在定位的時候會當作沒發現它，兩者的位置重疊都是可以的

? ?HTML的布局機制就是用文檔模型的，即塊元素獨占一塊

3、對于CSS的浮動float問題 查閱一些資料解釋 弄清楚了些 ?先加個鏈接 這個對浮動問題總結的比較好http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

浮動就是脫離文本流，獨立于原來的網頁之上，浮動的內容就在文檔流空間上空獨立出來。

上面鏈接中提到了：

? ? ? ?div的順序是HTML代碼中div的順序決定的。

???????靠近頁面邊緣的一端是前，遠離頁面邊緣的一端是后。

所以注意有時候幾個div右浮動，123的順序顯示出來卻是321，這就是因為上面的原因

?

清除浮動問題 ?清除浮動式針對某個div自身設定的，?語法：?clear : none | left | right | both

? ? none? :? 默認值。允許兩邊都可以有浮動對象

? ? left?? :? 不允許左邊有浮動對象

? ? right? :? 不允許右邊有浮動對象

? ? both? :? 不允許有浮動對象

4、層模型 類似ps中的圖層，對某個圖層進行準確移動定位，層模型就可以對div模塊進行準確的進行定位

定位的類型分為：

? ? ? ? ? ? ? ? ? ? ? ? 1）絕對定位 absolute ? ?脫離文檔流

? ? ? ? ? ? ? ? ? ? ? ? 2)相對定位 ? relative ? ? ?不脫離文檔流

? ? ? ? ? ? ? ? ? ? ? ? 3）固定定位 fixed

? ? ? ? ? ? ? ? ? ? ? ? 4）不定位 ? static ? ? （默認）

今天先做個簡單總結，隨后補加詳細分析 ?

轉載于:https://www.cnblogs.com/lanyiming/p/5304374.html

總結

以上是生活随笔為你收集整理的浅谈CSS布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。