css清除浮动

一：浮动产生原因

一般浮动产生的原因是因为子元素使用float属性产生的，导致父元素不能被撑开。

二：浮动带来的后果

1.由于浮动，父级内容不能被撑开，所以背景（背景颜色，背景图片）无法显示

2.如果设置了边框属性，边框不能被撑开

3.margin，padding设置值不能正确显示。

三：清除浮动的方法

案例：有3个盒子，一个父元素parent，两个子元素children_left，children_right。他们的样式分别如下：

<div class="parent">
            <div class="children_left"></div>
            <div class="children_right"></div>
</div>

.parent{
                width: 300px;
                border: 1px solid red;
                background: #666666;
            }
            .children_left{
                width: 100px;
                height: 100px;
                background: yellow;
                float: left;
            }
            .children_right{
                width: 100px;
                height: 100px;
                background: green;
                float: right;
            }

浏览器效果如下图：

以下针对这个案例进行清除浮动：

第一种方法：可以为父元素设置高度，这种情况只适用在知道父元素高度的前提下。其余代码不变，只需要修改parent的样式为其添加一个高度，如下

.parent{
                width: 300px;
                border: 1px solid red;
                background: #666666;
                height: 102px;
            }

第二种方法：clear:both;其余代码不变，只需要在父元素</div>之前再加入一个div，设置其样式为clear:both;如下

<div class="parent">
            <div class="children_left"></div>
            <div class="children_right"></div>
            <div style="clear:both"></div>
 </div>

第三种方法： 为父级元素设置样式overflow: hidden;其余代码不变，只需在parent中加入样式overflow: hidden即可。如下

.parent{
                width: 300px;
                border: 1px solid red;
                background: #666666;
                overflow: hidden;
            }

 此外，还有很多清浮动的方法：

.clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            .clearfix{
                zoom: 1;
            }

把这个样式添加到父元素上，也能清除浮动

zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，但这作用几乎用不到。

设置zoom:1可以在IE6下清除浮动、解决margin导致的重叠等问题。

通常，当浮动子元素导致父元素塌陷的时候，只要给父元素加上overflow: hidden;来解决，但是对于IE不行，需要触发其hasLayout属性才可以。 zoom:1就是IE6 专用的 触发 haslayout 属性的。hasLayout是IE特有的一个属性。很多的IE下的css bug都与其息息相关。

在给低版本的IE做兼容的时候会用到zoom:1。例如，清除浮动的时候，我们会这么写
.clearfix::after{content: ".";clear: both;display: block;visibility: hidden;overflow: hidden;height: 0;*zoom:1}
为了防止低版本的IE浏览器不支持after选择器或者某些属性，在最后加上zoom:1来清除浮动。