一、css布局模型：

　　流動模型（Flow）

　　浮動模型（Float）

　　層模型（Layer）

1、流動模型：

頁面在沒有設置任何css樣式，元素按照本身的特性在瀏覽器中顯示，這樣的布局模型稱為流動模型；

2、浮動模型：

①.浮動屬性

float:none(默認值，不浮動)|left(左浮動)|right(右浮動);

②.清除浮動

clear:none|both|left|right;

　　none:默認值，允許兩邊有浮動

　　both:清除左浮動和右浮動

　　left:清除左浮動

　　right:清除右浮動

註：當本元素前面有元素浮動對本元素造成了影響，給本元素添加清除浮

在網頁中使用float屬性進行頁面布局；

當元素設置了float屬性後，就脫離了正常的文檔流；

3、層模型：

position:static(默認值)|absolute(絕對定位)|relative(相對定位)|fixed(固定定位);

①.絕對定位（absolute）

絕對定位的參照物：

a）是絕對定位元素的父包含塊（參照物與絕對定位元素是包含與被包含的關系）；

b) 父包含塊必須具有position定位屬性：

如果找不到滿足以上兩個條件的父包含塊，那麽相對於html，即瀏覽器窗口進行絕對定位

註：以下兩種情況，元素會脫離正常的文檔流，左右margin為auto將會失效

1）當元素設置了float屬性

2）當元素設置了絕對定位

②.相對定位(relative)

相對定位的參照物：

相對於偏移前的位置進行定位

相對定位不會脫離正常的文檔流

註：relative和absolute結合使用

給父元素設置relative,給子元素設置absolute,在網頁布局中常這樣結合使用制作一些特殊效果

③.固定定位（fixed）

固定定位的參照物：屏幕窗口

註：a）固定定位的元素也會脫離正常的文檔流

　 b）固定定位的元素不隨滾動條滾動

④、定位層疊屬性設置：

z-index:auto|數值（一般為整數）;

註：a）當沒有設置z-index屬性時，後寫的元素優先顯示在上層，設置後，數值越大，越靠上

b) z-index也可以設置負值，設為負值時，在所有元素之下

前端之CSS布局模型