清除浮动的几种方法

面试又被问到了清浮动啊，一下子没答全，了解的也不是很透彻。再来总结一下！

为什么要清除浮动

因为浮动会使当前标签脱离文本流，同时会影响到前后标签、父级标签的位置及 width height 属性。
而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。

解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

解决方法

方式一:使用overflow属性来清除浮动

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

.ovh{
　　　overflow:hidden;
　}

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

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

方式二:使用额外标签法

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。

.clear{
　　　clear:both;
　}

a.内部标签：会将这个浮动盒子的父盒子高度重新撑开。

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

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

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

方式三:使用伪元素来清除浮动

直接在父元素上添加.clearfix类

.clearfix:after{
　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

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

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动
　　　　　}

　　　　.clearfix{
　　　　　　zoom:1;为了兼容IE
　　　　}

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
建议：推荐使用，建议定义公共类，以减少CSS代码

方式四:使用双伪元素清除浮动

.clearfix:before,.clearfix:after {
                  content: "";
                  display: block;
                  clear: both;
            }

 .clearfix {
             zoom: 1;
            }

总结

第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到。
第二种方法会增加许多不必要的标签，所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢?因为第四种是第三种的改良版虽然比较简便,但是不严谨。