浮动后，由于每个盒子的高度不同出现的位置问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
   div{
   width:200px;
   height:200px;
   background-color: blue;
   margin:10px;
   float:left;
   }
   .one{
   height:100px;
   }

   .two{
   height:230px;
   }

   .three{
   height:180px;
   }

   .four{
   height:150px;/*如果这边改成180，那么5 和6这两个盒子都会出现在第二行*/
   }
  </style>
</head>

<body>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
  



    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script>
    
    </script>
</body>

老师能解释一下这个现象吗，为什么第二行只有一个盒子，这个问题同样出现在视频的第12分钟

慕丝6937110 2019-01-13

源自：项目：JQ实现瀑布流 2-2 瀑布流基本样式

收起

1回答

Steve007 2019-01-14 17:36:49

同学，你好。可以给你简单画一个图：

每一个div都是浮动的，因为第4个是前四个里面高度最小的，所以第5个在浮动的时候前面都被挡住了，只能浮动到第四个下面，然后后面没有位置了，所以从第6个开始重新排列在一行，后面会通过js脚本来排列位置的。

祝学习愉快！

收起回答

提问者慕丝6937110 #1

第一个盒子高度不是更小吗，而且每个盒子宽度是一样的，为什么第5个盒子不会跑到第一个盒子下面去呢

2019-01-14 22:08:44
Steve007 回复提问者慕丝6937110 #2

同学，首先跟你道个歉，前面那个回答有所欠缺。老师详细来给你分析这个问题，因为盒子都设置了浮动，因此当第一行排了四个盒子，第五个盒子被挤下来之后，应该是从右向左浮动的，它向左浮动时会被第三个盒子挡住，因此第五个盒子会在第四个盒子的下边。第六个盒子浮动时，也会被第三个盒子挡住，因此会排在第五个的下面。后面就会依次排列。第十个浮动时，因为前面没有阻挡，因此会排在第六个的下面。祝学习愉快！

2019-01-15 09:51:02