我想要一批宽度固定，高度固定的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>1、为什么item8没有紧贴着item1?
2、float的左右对齐原则是怎样的？
这是因为第一行右侧的itme7把他挡住了，导致无法紧挨着
浮动的时候，如果一行结束，会另一起行，把前一行理解为一个整体（block）
这就是浮动的特性啊