清除浮动

clear: left | right | both; 左边|右边|两边 没有浮动。

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid green;
        background-color: blue;
    }
    .first{
        float: left;
        clear: both;
    }   
    .twice{
        float: left;
    }
</style>
</head>
    <div class="first">1</div>
    <div class="twice">2</div>

<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid green;
        background-color: blue;
    }
    .first{
        float: left;
    }   
    .twice{
        float: left;
        clear: both;
    }
</style>
</head>
    <div class="first">1</div>
    <div class="twice">2</div>

  对 .first 设置clear属性是无效的，因为渲染.first时，还不知道.twice会以什么样的方式渲染。（因为CSS样式的对象是自生，所有的CSS样式，都只对自己生效，而无法影响到别的元素）