div float 一行宽度不够时如何换行

发布于
2016-05-05

问题是：第七个色块在第一行已经放不下了，为什么会放到了第六个色块的下边？

<html>
    <head>
        <style>
            body{
                padding:0;
                margin: 0;
            }
            div{
                float: left;
            }
            div.first{
                width: 212;
                height: 257px;
                background-color: red;
            }
            div.second{
                width: 212px;
                height: 150px;
                background-color: green;
            }
            div.third{
                width: 212px;
                height: 270px;
                background-color: yellow;
            }
            div.forth{
                width: 212;
                height: 309px;
                background-color: gray;
            }
            div.five{
                width: 212px;
                height: 316px;
                background-color: orange;
            }
            div.six{
                width: 212px;
                height: 160px;
                background-color: blue;
            }
            div.seven{
                width: 212px;
                height: 273px;
                background-color: aquamarine;
            }
        </style>
    </head>
    <body>
        <div class="first">
            
        </div>
        <div class="second">
            
        </div>
        <div class="third">
            
        </div>
        <div class="forth">
            
        </div>
        <div class="five">
            
        </div>
        <div class="six">
            
        </div>
        <div class="seven">
            
        </div>
    </body>
</html>

图片描述