为什么我在CSS中浮动和清除的元素在其他浮动元素之后无法工作

Question

我试图了解为什么当我在第四个clear上使用float和div属性时，它不浮动在我浮动的第一个元素之上。前三个元素左边有浮动？ 同样为什么.main允许.aside浮动在第二个浮动元素下面？请有人帮忙。 （我也在浏览器视图中拍了一张照片）！

.main {
  background-color: #f7f4f4;
  width: 600px;
  padding: 20px;
  margin-right: 140px;
  margin-left: 20px;
  box-shadow: 10px 10px 10px #705656;
  border-radius: 10px;
  border: 2px solid red;
  float: left;
}

.shot {
   border: 2px solid black;
   width: 400px;
   background-color: #8bed8f;
   float: left;
}

.aside {
  background-color: #f47575;
  width: 400px;
  border-radius: 4px;
  margin-bottom: 20px;
  float: left;
}

.trac {
  border: 2px solid black;
  width: 400px;
  background-color: blue;
  float: left;
  clear: left;
}