css的浮动属性

div在HTML5中属于块状元素，在页面显示中是独占一行的，默认上下排序，也就是标准文档流，如图所示：
.box-1{width:200px;height:200px;background-color:#f00;}
.box-2{width:200px;height:200px;background-color:#0f0;}

但是在页面布局时为想要的效果，会要求在一行内有多个块状元素并列显示。
这个是后就要用到CSS中的浮动属性：float
浮动属性有三个属性值：
float:left 元素向左浮动
float:right 元素向右浮动
Float:none 元素不浮动（默认值）
浮动的目的就是让多个块状元素并排显示，且给元素设置的浮动时，在同一行的块状元素要都给它设置浮动，否则就会出现重合或遮盖的效果，如图所示
.box-1{width:200px;height:200px;background-color:#f00;float: left;}
.box-2{width:500px;height:200px;background-color:#0f0;}

逆战
由此可以得出浮动了的元素脱离标准文档流会把它本来的位置让出来给他下一个元素。
也就是让元素脱离标准文档流，漂浮在标准文档流之上。
浮动的元素的规律是：浮动元素在没有margin和padding的情况下会一个紧挨一个横向排列，当这一行放不下这两个元素是那么后面这个元素2会被前面元素1给挤下去。
浮动也可以用来实现文本环绕的效果如图所示:

浮动还可以修复关于ie浏览器图片三像素的bug
浮动的显示规则：浮动对象会像左或者右移动直到遇到边框（border）、填充值（padding）、外边界（margin）或者另一个块元素为止。
有三种情况float:不生效
1）当宽+宽大于父级元素的宽时；
2）只给一个元素加了float时；
3）单词写错