为什么要清除浮动，什么时候要清除浮动，如何清除浮动

众所周知，CSS中的定位机制分为，文档流，浮动和绝对定位。(今天不谈绝对定位)，如果对元素没有进行任何定位处理的话，元素应该处于文档流中，当我们对元素进行了浮动(float)时，我们的元素就会脱离文档流，像一只小船一样漂流在文档之上。首先来看一下浮动会带来哪些result.

第一：先看代码





效果：



result ：1、父盒子的margin受到影响，无法实现左右居中，

2、我没有给父盒子设置高度，浮动后父盒子的高度没有被撑开，图片中撑开的高度是padding带来的效果。

接下来我们再进行一个有趣的操作，添加一个div块类名为d，并且我们不对他进行浮动，这时候你会发现：



div：d竟然跑到了div:a的下面。那么此时我们就需要进行清除浮动了。

第二：清除浮动的方法

方法1、 在浮动元素的最后面添加一个新元素，应用clear:both.（clear:left是清除左浮动，clear:right是清除有浮动。为了方便，一般我们都是使用clear:both）

代码如下：



效果：



注：也可以直接在div:d上添加clear:both，效果一样。

方法2、浮动元素的父元素使用overflow：auto；

zoom是为了处理兼容问题添加。

注意：使用overflow属性来清除浮动有一点需要注意，overflow属性共有三个属性值：hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动，但切记不能使用visible值，如果使用这个值将无法达到清除浮动效果，其他两个值都可以，其据说在于一个对seo比较友好，另一个hidden对seo不是太友好。

方法3、使用伪类：after，：before，同样是对浮动元素的父元素添加，此方法也是我最喜欢的方法





其中clear:both;指清除所有浮动；content: '.'; display:block;对于FF/chrome/opera/IE8不能缺少。