CSS - 意外浮动问题

我正在学习CSS中的浮动元素，并遇到以下特殊行为。CSS - 意外浮动问题

下面是代码

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

 
     #one { background-color: red; width: 200px; height: 200px; margin: 10px; } 
 
     #two { background-color: yellow; width: 200px; height: 205px; margin: 10px; } 
 
     #three { background-color: lightpink; width: 200px; height: 200px; margin: 10px; } 
 
     #four { background-color: green; width: 200px; height: 200px; margin: 10px; } 
 
     #five { background-color: coral; width: 200px; height: 200px; margin: 10px; } 
 
     #six { background-color: #b1ffea; width: 200px; height: 200px; margin: 10px; } 
 

 
     div{ 
 
      /*display: inline-block;*/ 
 
      float: left; 
 
      vertical-align: central; 
 
     } 
 

 

 
    </style> 
 

 
</head> 
 
<body> 
 

 
    <div id="one"> 
 
     First div 
 
    </div> 
 

 
    <div id="two"> 
 
     Second div 
 
    </div> 
 

 
    <div id="three"> 
 
     three div 
 
    </div> 
 

 
    <div id="four"> 
 
     four div 
 
    </div> 
 

 
    <div id="five"> 
 
     five div 
 
    </div> 
 

 
    <div id="six"> 
 
     six div 
 
    </div> 
 

 
</body> 
 
</html>

我的问题是，为什么 “四个格” 被放置在 “第三次DIV” 不是第一和第二下面？另一方面，如果我调整浏览器的大小（见下图），为什么在这种情况下它完美的工作？

来源

2016-11-17 Cody

由于第二个div元素比第一个div高，第四个div与第二个div碰撞。当第四个div落到下一行时，它从右边开始，向左滑动，从第三个div开始，直到它与第二个div碰撞。如果你看看你的代码，每行有4个div元素，第五个div会下降到下一行。它从第四个div下面开始向左移动，直到它与第二个div碰撞，因为第二个div比第三个或第四个div元素长。