6 清除浮动

在浮动元素后面添加 clear:both的空 div 元素

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div style="clear:both"></div>
    </div>

给父元素添加 overflow:hidden 或者 auto 样式，触发BFC

    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    .container{
        width: 300px;
        background-color: #aaa;
        overflow:hidden;
        zoom:1;   /*IE6*/
    }

使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。

    <div class="container clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>

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

推荐使用第三种方法，不会在页面新增div，文档结构更加清晰

6 清除浮动

详情