清除浮动的4种方法

.container{
            background-color: #ccc;
        }
        p{
            font-size: 1rem;
            margin-top : 1rem;
        }

<div class="container">
        <h3>Test</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quibusdam obcaecati eveniet error, similique nam quis labore aliquid culpa accusantium laudantium incidunt perspiciatis deleniti sapiente soluta minus. Harum, aperiam, cupiditate. ipsum dolor sit amet, consectetur adipisicing elit. Iure excepturi laborum quae harum provident voluptates doloribus molestias eius dolor, quo quis optio similique hic, pariatur nisi, et blanditiis, quam corporis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quibusdam obcaecati eveniet error, similique nam quis labore aliquid culpa accusantium laudantium incidunt perspiciatis deleniti sapiente soluta minus. Harum, aperiam, cupiditate. ipsum dolor sit amet, consectetur adipisicing elit. Iure excepturi laborum quae harum provident voluptates doloribus molestias eius dolor, quo quis optio similique hic, pariatur nisi, et blanditiis, quam corporis.</p>
</div> 

首先贴上代码，给.container一个灰色的背景色，然后给h3和p添加浮动：

h3,p{
         float : left;
    }

可以看到添加了浮动后.container发生了高度塌陷，接下来看下清除浮动的方法：

1、在div.container内的最后添加上<div style="clear : both"></div>，

<div class="container">
        <h3>Test</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quibusdam obcaecati eveniet error, similique nam quis labore aliquid culpa accusantium laudantium incidunt perspiciatis deleniti sapiente soluta minus. Harum, aperiam, cupiditate. ipsum dolor sit amet, consectetur adipisicing elit. Iure excepturi laborum quae harum provident voluptates doloribus molestias eius dolor, quo quis optio similique hic, pariatur nisi, et blanditiis, quam corporis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quibusdam obcaecati eveniet error, similique nam quis labore aliquid culpa accusantium laudantium incidunt perspiciatis deleniti sapiente soluta minus. Harum, aperiam, cupiditate. ipsum dolor sit amet, consectetur adipisicing elit. Iure excepturi laborum quae harum provident voluptates doloribus molestias eius dolor, quo quis optio similique hic, pariatur nisi, et blanditiis, quam corporis.</p>
        <div style="clear:both"></div>
    </div>  

这样就可以清除浮动，非常方便，但是如果在维护的时候出现这种空标签太多的话，那是一个非常大的噩梦了。。。（所以不推荐使用）

2、给.container加上一个overflow : auto/hidden

.container{
            background-color: #ccc;
            overflow: auto;

        }

这种方法很帅，让h3和p又回到了container容器中达到了清除浮动的效果。

3、让container也浮动

.container{
            background-color: #ccc;
            float : left;

        }

但是因为父元素也浮动了因此也会影响到页面整体的布局，所以也不推荐使用。

4、使用css的after伪元素

.clearfix:after{
            content: " ";
            display : block;
            height: 0;
            clear : both;
            visibility: hidden;
        }
        .clearfix{
            zoom : 1;   //兼容IE6，7
        }

通过给container增加一个class->clearfix :<div class="container clearfix"></div>

来实现添加一个看不见的clear : both 的块级元素来清除浮动，原理和第一种差不多。（推荐使用）

第四种方法更优雅地实现：

.clearfix:after{
            content: " ";
            display : table;     //通过设置该属性触发BFC
            clear : both;

        }

也可以这样来写（最后的写法是最推荐使用的！）

.clearfix:before,
    .clearfic:after{    //添加   :before防止顶部的空白崩溃,问题不大
      content : " ";
      display : table;
    }
    .clearfix:after {
      clear : both;
    }

这些方法并不是最优的，通过某些属性值去触发BFC也可以清除浮动，如何触发BFC大家可以百度学习一下。