Float浮动、 CSS定位(position)
1.CSS定位机制
（1）普通流（标准流）
-默认状态，元素自动从左往右，从上往下的排列
（2）浮动
-会使元素向左或向右移动，只能左右，不能上下
-浮动元素碰到包含框或另一个浮动框，浮动停止
-浮动元素之后的元素将围绕它，之前的不受影响
-浮动元素会脱离标准流
·使用浮动后产生的问题
（1）浮动溢出
（3）绝对定位
（4）清除浮动语法
-clear:none | left | right | both
清除浮动只影响自身，不影响其他元素
-清除浮动的常用方法
·在浮动元素后使用一个空元素：<div class="clear"></div>
·给浮动的容器添加overflow:hidden;
·使用CSS3的after类似于添加一个空盒子（伪元素）
-清除浮动的其他方法
·父级元素定义height。只适合高度固定的布局
·父级元素也一起浮动。不推荐，会产生新的浮动问题
2.CSS-position
定位
（1）static（自然模型）
作用：使元素定位于常规/自然流中（块、行垂直排列下去、行内水平从左到右）
特点：
·忽略top、bottom、left、right、或者z-index声明
·两个相邻元素如果都设置了外边距，那么最终外边距=两者外边距中最大的
·具有固定width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大沾满剩余宽度。
造成的效果就是这个块水平居中
（2）relative（相对定位模型）
作用：使元素成为containing-block
特点：
·可以使用top、bottom、left、right、或者z-index进行相对定位
·相对定位的元素不会离开常规流
·任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位
·可以使浮动元素发生偏移，并控制他们的堆叠顺序
（3）absolute（绝对定位模型）
作用：使元素脱离常规流
特点：
·脱离常规流
·设置尺寸要注意：百分比比的是哪个元素
·lrtb如果设置为0，它将对齐到最近定位祖先元素的各一边
·lrtb如果设置为auto，它将会被打回原形
·如果没有最近定位祖先元素，会认<body>做父级
·z-index可以控制堆叠顺序
（4）fixed（固定定位模型）
作用：与绝对定位本是同根生相煎何太急
特点：
·跟absolute的区别在于相对于谁做绝对定位
·固定定位元素不会随着视口滚动而滚动
·继承absolute特点
（5）sticky（磁贴定位模型）
作用：relative和fixed的完美结合，制作出吸附效果
特点：
·如果产生偏移，原位置还在常规流中
·如果它的最近祖先元素有滚动，那么它的偏移标尺就是最近的祖先元素
·如果最近祖先元素没有滚动，那么它的偏移标尺是视口
·上下左右的偏移规则