清除浮动的几种方法

学习总结了几种清除浮动的方法：

浮动对页面的影响：

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。

float: left;float: right;

清除浮动：clear:both;

咱们先来搭建一个结构：html如下

     

对应的css如下：

浏览器渲染后的样式如下：

然后问题来了，灰的父盒子显然没被撑开，没有占位导致兄弟粉色盒子自动补位，也与子盒子并排显示。那么我们就要解决这种问题了，依次通过以下几种方法来演示：

１  使用额外标签法：  

在浮动的盒子之下（里边或者外边）再放一个空标签，在这个标签中使用clear:both，来清除浮动对页面的影响。

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开（注意空标签要放在最后，否则不起作用）

而是：

效果如下：

b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。

效果：

注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。

２  使用overflow属性来清除浮动：

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响。

注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（溢出隐藏）。

３  使用伪元素来清除浮动（常用）：

.clearfix:after {

                content:"";//添加内容为空

                height: 0;//内容高度为0

                line-height: 0;//内容文本的高度为0

                display: block;//将文本设置为块级元素

                clear: both;//清除浮动

                visibility:hidden;//将元素隐藏

          }

          .clearfix {

                zoom: 1;/*为了兼容ie6*/

          }

前面都是铺垫记住最后一个即可了。

PS:  使用双伪元素清除浮动：

伪元素：在页面上不存在的元素，但是可以通过css来添加上去。

种类：

:after（在。。。之后）

:before（在。。。之前）

注意：每个元素都有自己的伪元素。