浮动float和清楚浮动clearfix

       浮动，在HTML排版常常被使用的一个CSS属性，很多网页设计都会用到浮动，但并不是说浮动是网页排版的必需品。由于浮动具有破坏性，很多时候采用浮动反而会造成适得其反的效果。在张大神的CSS三无准则中就有一条准则是“无浮动”，提倡整个网页排版最好不需要用到浮动元素。每个人并非张大神，对于网页的排版设计有自己的想法和方式，需不需要用到浮动都取决自己，不需要太过刻意去追求完全无浮动的布局。

float的历史

       道家有云：人法地，地法天，天法道，道法自然。一切事物追其本质，只有掌握其本质才能，才能更好的去理解它。对于浮动，我们也需要去了解它的历史，才能更好的运用。
       在比较早的HTML文档中图片和文字是相互分离的，文档呈现显得极其难看，为了解决这个问题，就提出了float属性帮助文字呈现，所有float最初的作用是——文字环绕。

最初排版：

图片使用float：left实现文字环绕：

float的特性

了解了float的原本的作用实现文字环绕后，需要了解它的特性：包裹性和破坏性

       包裹性，顾名思义就是将原本松散的、没有规则的物体添加外层容器将其隔绝起来，包裹中的任何性质发生变动都不会对包裹外的事物造成影响。专业术语称为：block formatting context——块级格式化上下文，简称BFC。

       破坏性，对无高容器中子容器使用float的会造成父容器的高度塌陷，并且子容器位置会根据float的属性值发生变动，由于float具有破坏性，所有很多人称float为魔鬼。

float的破坏性带来的父容器高度塌陷是不是bug

       很多人以为float的破坏性造成父容器高度塌陷是一个bug，然而并非如此，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;}

什么情况下需要使用.clearfix

       很多人会滥用.clearfix，在不需要的父容器上添加.clearfix，这个做法其实是多余的。那么，在什么情况下需要使用.clearfix呢，clearfix应用在包含浮动子元素的父级元素上。滥用.clearfix并非是因为浪费，而是可能会让IE6/IE7做出很多出格的事情，所以在使用.clearfix时请清楚它是作用在包含浮动子元素的父级元素上。