一、css佈局模型： 流動模型（Flow） 浮動模型（Float） 層模型（Layer） 1、流動模型： 頁面在沒有設置任何css樣式，元素按照本身的特性在瀏覽器中顯示，這樣的佈局模型稱為流動模型； 2、浮動模型： ①.浮動屬性 float:none(預設值，不浮動)|left(左浮動)|right ...
一、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也可以設置負值，設為負值時，在所有元素之下
