浮动，在HTML排版常常被使用的一个CSS属性，很多网页设计都会用到浮动，但并不是说浮动是网页排版的必需品。由于浮动具有破坏性，很多时候采用浮动反而会造成适得其反的效果。在张大神的CSS三无准则中就有一条准则是“无浮动”，提倡整个网页排版最好不需要用到浮动元素。每个人并非张大神，对于网页的排版设计有自己的想法和方式，需不需要用到浮动都取决自己，不需要太过刻意去追求完全无浮动的布局。
了解了float的原本的作用实现文字环绕后，需要了解它的特性：包裹性和破坏性
包裹性，顾名思义就是将原本松散的、没有规则的物体添加外层容器将其隔绝起来，包裹中的任何性质发生变动都不会对包裹外的事物造成影响。专业术语称为：block formatting context——块级格式化上下文，简称BFC。
破坏性，对无高容器中子容器使用float的会造成父容器的高度塌陷，并且子容器位置会根据float的属性值发生变动，由于float具有破坏性，所有很多人称float为魔鬼
很多人都知道清除浮动这个说法，其实这个说法并不准确，应该称为清除浮动带来的影响，因为浮动是一直存在的。
清除浮动的两种方法：
方法一：HTML实现方法，脚底插入clear:both，在塌陷的父容器底部插入block水平元素
<div style="content:'';clear: both;"></div>方法二：父元素BFC（IE8+）或haslayout（IE6/IE7），使用CSS在塌陷的父容器底部生成一个clear：both的after伪元素
.clearfix:after{content: '';display: block;height: 0;overflow: hidden;clear: both;}这两种方法都有不足之处，第一种在HTML中插入div元素，会让人觉得多余；第二种方法，after伪元素，对于IE6/IE7它们是陌生的。
可兼容IE6/IE7的写法
.clearfix:after{content: '';display: block;height: 0;overflow: hidden;clear: both;}
.clearfix{*zoom:1;}
对于伪元素还有一种更好的方法（兼容性ok）：
.clearfix:after{content: '';display: table;clear: both;}
.clearfix{*zoom:1;}- 1
- 2
- 1
- 2
什么情况下需要使用.clearfix
很多人会滥用.clearfix，在不需要的父容器上添加.clearfix，这个做法其实是多余的。那么，在什么情况下需要使用.clearfix呢，clearfix应用在包含浮动子元素的父级元素上。滥用.clearfix并非是因为浪费，而是可能会让IE6/IE7做出很多出格的事情，所以在使用.clearfix时请清楚它是作用在包含浮动子元素的父级元素上。