浮动的定义
使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停下来。
（文档流是文档中可显示对象在排列时所占用的位置）
浮动的特征
1、使块元素在一行显示；
2、使内联元素支持宽高；
3、默认内容撑开宽度；
4、使元素脱离文档流；
5、提升层级半层
给元素在某个方向上设置浮动：
float:left | right | none | inherit;
使元素的某个方向上不能有浮动：
clear:left | right | both | none | inherit；
对清除浮动的理解：
我们所说的“清除浮动”是指，清除由于子元素浮动带来父元素高度塌陷的影响。（清除的是该影响）
换句话说，我们既想让子元素在同一行显示，又想避免父元素的高度塌陷。
△使用after伪类清除浮动
<head>
<meta charset="utf-8">
<title></title>
<style>
.clearfix{ //ie6、ie7需额外添加语句
*zoom:1;
}
.clearfix:after{ //清除浮动语句
content: "";
display: block;
clear: both;
}
.box{
border:1px solid red;
}
.item{
width: 200px;
height: 200px;
background-color: green;
margin-right:20px;
float: left; //此处使用了浮动
}
</style>
</head>
<body>
<div class="box clearfix"> //要清除浮动，需在其父类上设置伪类
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
未清除浮动时，状况如下（绿方块设置了浮动，脱离了文档流，故其父类边框内再无任何内容，重叠到一起，造成了高度塌陷）
清除浮动后，显示正常（所以清除浮动并不是不让元素浮动，而是避免元素浮动的负面影响）
