因为浮动定位不属于正常的页面流，所以当子元素都是浮动元素时，非浮动的父容器在显示时不会考虑子元素的位置，这样子父元素就会出现坍塌的现象。

解决方法

1.添加空元素

在父容器末尾添加一个空元素，并且清除浮动,如：

//html
<div class="layout">
    <div class="content"></div>
    <div class="content"></div>
    <div class="clear"></div>
</div>

//css
    .content{
        width:200px;
        height:200px;
        float:left;
    }
    .clear{
        clear:both;
    }

但是这样，很冗余，能不能不要添加多余的html标签呢？只用css实现？

2.让父元素一起浮动

将父容器也设置为浮动，但是这样子会影响后面元素的定位，而且有时候可能父元素是定位死的，浮动起不了作用

3.父元素自动清除浮动

给父元素加一句“overflow:hidden”;父元素就会自动清除浮动。但是有两个缺点：一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

4..after，.before伪选择符

.clearfix:after {
    content: "\0020";/*空字符*/
    display: block;
    height: 0;/*隐藏元素*/
    clear: both;
}
.clearfix {
    *zoom: 1;//表示这个属性仅仅应用到IE 7 以及以下版本
}

或者

.cf:before,
.cf:after{
    content:"";
    display:block;
}
.cf:after{
    clear:both;
}
.cf{
    *zoom:1;//表示这个属性仅仅应用到IE 7 以及以下版本
}

关于zoom

IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。

其中zoom是为了兼容IE7以及以下版本，zoom:1就是IE6 专用的触发 haslayout 属性的，hasLayout是IE特有的一个属性。很多的IE下的css bug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。

zoom原理

zoom是设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。

虽然此属性不可继承，但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。

此属性对于 currentStyle 对象而言是只读的，对于其他对象而言是可读写的。

当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

Zoom属是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在 CSS 3.0 规范草案中。

目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？

我们可以通过css3里面的动画属性scale进行缩放。

其他相关内容

为了实现inline-block的兼容的时候，我们会这么写：

{
    display: inline-block;
    *display:inline;
    *zoom:1;
}

因为在IE6、IE7下，只有设置在默认显示方式为inline的元素上才会生效。前面说过，当内联元素的hasLayout为true的时候，可以给这个内联元素设定高度和宽度并得到期望的效果，所以这样做可以达到兼容inline-block的效果。

参考文档：
http://www.ruanyifeng.com/blog/2009/04/float_clearing.html
https://blog.csdn.net/minidrupal/article/details/39651529/

float带来的问题