<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    /* 方法一 */
    /*.clearfix{overflow:hidden;_zoom:1;}*/

    /* 方法二 */
    /*.clearfix{overflow:auto;_height:1%}*/

    /* 方法三 */
    /*.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden}*/
    /*.clearfix{*+height:1%;}*/


    .container>div{
        width:200px;
        height:100px;
        float:left;
    }

    .red{
        background-color: red;
    }

    .green{
        background-color:green;
    }

    .black{
        background-color:black;
    }
</style>

<body>
    <div class="container clearfix">
        <div class="red"></div>
        <div class="green"></div>
        <div class="black"></div>
    </div>

    <!-- 方法四 -->
    <!--<div style="clear:both"></div>-->

    <div>
        浮动框测试 ...2
    </div>
</body>
</html>