CSS清除浮动的几种方法。

<div class="box">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
    </div>

当给所有的子元素使用浮动的话，这时候父元素的高度就坍塌，高度就为0.
**清除浮动的方法：
第一种：**给父元素添加css属性：overflow: hidden;

		.div1{
             width: 100px;
             height: 100px;
             border: 1px solid black;
             float: left;
        }

        .box{
            overflow: hidden;	  
        }

但是这种方法：当子元素中的内容很多的时候，而且需要换行才能显示完全的时候，这时候溢出的部分就会被隐藏。

第二种方法：再最后的一个子元素（好像不能是行内元素）后添加一个空白标签，给空白便签添加css属性：clear：both就可以清除浮动出现的高度坍塌。

 <div class="box">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <p></p>
    </div>

.div1 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;
        }

        p {
            clear: both;
        }

第三种：给父元素添加伪元素（after），然后再设置相应的属性：

.div1 {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: left;
        }

        .box:after {
            content: "";
            display: block;
            clear: both;
        }

<div class="box">
        <div class="div1"></div>
        <div class="div1"></div>
        <div class="div1"></div>
        <p></p>
    </div>

存在兼容性问题