## float（**浮动**，一个个挨着）
>[success]### 一、文档流
**文档流：** HTML页面的标准文档流是：从上到下，从左到右，遇块(块级元素)换行。
**浮动层：** 脱离文档流，进行左右浮动，紧贴着父元素的左右边框。
>[info]### 二、浮动
**特性:** 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。(向一边依靠,挤满换行)
**常用用途:** 让div在同一行排列
<div style="background:#ddd;overflow:hidden;">
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
</div>
<br>
>[warning]### 三、清除浮动
### 浮动产生负作用
* 父级元素不能被撑开.高度为0,背景不能显示,边框不能随内容而被撑开(**父元素塌陷**)
* 影响周围其它元素布局.
* margin padding设置值不能正确显示
### 所以用了浮动之后要**清除浮动**
### 方式一:在浮动的元素最后加一个空div
~~~
<div style="clear:both;"></div>
~~~
缺点:冗余无关代码
### 方式二:父级元素增加 overflow:hidden
缺点:高度不能固定.否则将被隐藏
优点:简洁
### 方式三(推荐) :父级定义 伪类:after 和 zoom
~~~
.clearfloat:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
}
.clearfloat{
zoom:1;/*兼容IE6、IE7清除浮动*/
}
~~~
[清除浮动的8种方法](http://www.jb51.net/css/173023.html)
[浮动详细说明](http://www.w3school.com.cn/css/css_positioning_floating.asp)
