CSS定位机制
普通流（标准流） 浮动 绝对定位
普通流（标准流）：默认状态，元素自动从左往右，从上往下的排列
块级元素：
1、独占一行
2、可以设置宽、高
3、如果不设置宽度，宽度默认为容器的100%
4、eg：div、片、h1~h6、ul、ol、li、dl、dt、dd......
行内元素：
1、与其他元素同行显示
2、不可以设置宽、高
3、宽高就是文字或图片的宽高
4、eg：span、a、b、i、u、em......
左浮动效果
因为为图片设置浮动，图片就脱离了文档流，文字就会自动往上走，但图片虽然脱离了文档流，但扔处在文本流中，所以仍旧会占据文本空间，会把文字挤向旁边，固文字和图片不会重叠，就产生了文字环绕图片的效果
使用浮动后产生的问题-------
浮动溢出：元素使用浮动后会脱离普通流，出现“高度塌陷”；使用浮动的时候，子元素的浮动会导致父元素发生塌陷，因为子元素进行了浮动，脱离了标准流，使得父元素无法检测到子元素，导致父元素塌陷、没有高度；同理，因为浮动元素脱离了标准流，使得临近元素无法感知到浮动元素，使得普通元素占据浮动元素的位置，发生异位。
清除浮动语法：
clear:none | left | right | both;
设置了float的元素会影响其他相邻元素，需要使用clear清楚浮动，clear只会影响自身，不会对其他相邻元素造成影响。
clear不是把元素身上的浮动清除掉，而是让元素规定的那一侧不允许有其他的浮动元素。
清除浮动的方法：
第一种：浮动元素后边使用一个空元素
<div class="clear"></div>
clear：both；
第二种 给浮动元素的容器（父元素）添加overflow:hidden;
第三种：使用css3的:after伪类、
.class名:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.class类名{
zoom:1;
} 用来兼容低版本IE
清除浮动其他方法
1.父元素定义height.只适合高度固定的布局。
2.父元素也一起浮动。不推荐，会产生新的浮动问题。
}
.class类名{
zoom:1; 用来兼容IE浏览器
}
