浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。
- 文字环绕效果
<p>It's fun to float.It's fun to floatIt's fun to float</p>
p {margin:0; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}
- 创建分栏
在上例基础上，只要给段落设定宽度，然后浮动它即可。
清除浮动
浮动框不属于文档中的普通流，当一个元素浮动之后，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。
清除浮动的方法：
1.使用 clear 样式清楚
.clear-float { clear:both; }
clear 属性规定元素的哪一侧不允许其他浮动元素。这个规则只能影响使用清除的元素本身，不能影响其他元素。
clear 会为元素添加足够的空白空间，使到该元素的位置会放置在它前一个浮动元素之下，这跟增加元素外边距使到元素占据满行而强制换行的效果是一样的，事实上在 CSS1 和 CSS2 中，清除浮动正是通过自动为清除元素（即设置了 clear 属性的元素）增加外边距实现的，从 CSS 2.1 开始改为增加额外的空白空间，不改变外边距。
2.使用伪元素 :after 清除
.after-clear-float :after{content:””; display:block; clear:both;}
3.使用 overflow 清除
.overflow-clear-float {overflow:hidden;}
或者
.overflow-clear-float {overflow:auto;}
overflow 样式值为 非 visilbe 时，实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts。创建了它的元素，会重新计算其内部元素位置，从而获得确切高度。这样父容器也就包含了浮动元素高度。
相对可用方法
.clearfix{
*zoom:1;
}
.clearfix:after{
content:"";
display:table;
clear:both;
}
