一、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也可以设置负值，设为负值时，在所有元素之下