清除浮动的几种方法

1. 父级添加overflow

    .clearfix {
        overflow: auto;//或者设置为hidden
        zoom: 1;//支持IE6
    }
    #content,#sidebar {
        float: left;
        display: inline;//修正IE双外边距
    }
    <div id="container" class="clearfix">
        <div id="content"></div>
        <div id="sidebar"></div>
    </div>

2. 添加空元素

        .clear {
            clear:both;
            display:block;
            height:0px;
            width:0px;
            overflow:hidden;
        }

    <div id="container" class="clearfix">
        <div id="content"></div>
        <div id="sidebar"></div>
        <div class="clear"></div>
    </div>

3. 父元素添加after伪类

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            display: inline-block;
        }
        * html .clearfix {
            height: 1%;
        }
        .clearfix {
            display: block;
        }
    </style>

    <div id="container" class="clearfix">
        <div id="content"></div>
        <div id="sidebar"></div>
    </div>

4.

        .clearfix:before, 
        .clearfix:after {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            zoom: 1;
        }

    <div id="container" class="clearfix">
        <div id="content"></div>
        <div id="sidebar"></div>
    </div>

参考链接：
StackOverflow：Which method of ‘clearfix’ is best?：清除浮动黑科技完整解读