CSS的float属性使得元素按照怎样的方式左右对齐？

我想要一批宽度固定，高度固定的div填满容器。我将各个div设为float:left。然而会出现下面的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .item{
            width:200px;
            border:1px solid red;
            float:left;
            margin:0 30px;
        }
        .item1,.item3,.item4{
            height:300px;
        } 
        .item2,.item5,.item6{
            height:100px;
        }
        .item7,.item8,.item9,.item10{
            height:200px;
        }
    </style>
</head>
<body>
    <div class="item item1">item1</div>
    <div class="item item2">item2</div>
    <div class="item item3">item3</div>
    <div class="item item4">item4</div>
    <div class="item item5">item5</div>
    <div class="item item6">item6</div>
    <div class="item item7">item7</div>
    <div class="item item8">item8</div>
    <div class="item item9">item9</div>
    <div class="item item10">item10</div>
</body>
</html>

图片描述