Html 容器内div的排列

我是一名花商，所以当我的插花知识没有转化为div插花html样式时，我和你一样惊讶。也许你能帮忙

以下是html：

<div id="blocks">
  <div id="block0"></div>
  <div id="block1"></div>
  <div id="block2"></div>
  <div id="block3"></div>
  <div id="block4"></div>
  <div id="block5"></div>
</div>

我想让block5的顶部正好滑到block1的底部，并解释一下它的行为。多谢各位

---

是这首歌的提琴，它将降到底部，因为你在第5格之前的几个元素上向左浮动。您可以移除块5左侧的浮动，设置位置：相对和顶部：20%（这将使块5相对于块容器放置20%顶部）

---

换句话说，block5正在崩溃，因为之前的块已经用完了所有可用的宽度空间。你可以把这和你的工作联系起来：如果你把花盆放在阳台边上，没有足够的空间，最后一盆花盆就会掉到别人的头上

为了避免这种情况，您可以使用其他div构建工具架。下面是对代码的快速尝试。只要付出一点努力，你就能做得更好

div{outline:solid 1px black}
#块{
宽度：80%；
保证金：0自动；
背景色：#ffe；
}
#shelve1，#shelve2，#shelve3{显示：内联块}
#搁置1{宽度：21%}
#书架2{宽度：56%}
#搁置3{宽度：21%}
#区块0{
高度：50px；
背景：红色；
显示：块
}
#块1{高度：50px；背景：橙色}
#区块2{高度：450px；背景：青色}
#块3{高度：225px；背景：黄色}
#块4{高度：225px；背景：绿色}
#区块5{高度：400px；背景：洋红}

---

这是一个高质量的答案。非常感谢。

 div {
  outline: solid 1px black;
}
#blocks {
  width:80%;
  height:500px;
  margin:0 auto;
  background-color: #ffe;
}

#block0 {
  height:10%;
  width:100%;
  background: red;
  float: left;
}

#block1 {
  height:10%;
  width:25%;
  background: orange;
  float: left;
}

#block2 {
  height:90%;
  width:50%;
  background: cyan;
  float:left;
}

#block3 {
  height:45%;
  width:25%;
  background: yellow;
  float: right;
}

#block4 {
  height:45%;
  width:25%;
  background: green;
  float: left;
}

#block5 {
  height:80%;
  width:25%;
  background: magenta;
  float: left;
}

    #block5 {
    height:80%;
    width:25%;
    background: magenta;
    position: relative;
    top: 20%;
    }