div floatパズルの組み立て方がわからない

こちらの→DIVパズル２を組み立てており、答えは下２つのコードになるそうなのですが、
答えを見てもイマイチ仕組みが理解できません。
わからない部分↓

      <div class="clearfix">
        <div class="green-box"></div>
        <div class="midright">
          <div class="clearfix">
            <div class="midright2">
              <div class="yellow-box"></div>
              <div class="lightblue-box"></div>
            </div>
            <div class="pink-box"></div>
          </div>
          <div class="red-box"></div>
        </div>
      </div>

clearfixはわかっているつもりですが、主にクラスのmidrightやmidright2が何故必要なのかがわかりません。
まずこのパズルを組み立てるときの順序として、divでそれぞれの色のピースを作る(7色)→浮いている部分をfloatで修正するくらいの認識でいますが、考え方としてあっているのでしょうか？
clearfixが2つ出てくる理由も分からず仕舞いです。何かわかりやすい方法はないものでしょうか。

答え↓

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <link rel="stylesheet" href="../../../tools/style/reset.css" />
8    <link rel="stylesheet" href="./style.css" />
9    <title>div-puzzle-pc | lesson-2</title>
10  </head>
11  <body>
12    <div class="wrapper">
13      <div class="blue-box"></div>
14      <div class="clearfix">
15        <div class="green-box"></div>
16        <div class="midright">
17          <div class="clearfix">
18            <div class="midright2">
19              <div class="yellow-box"></div>
20              <div class="lightblue-box"></div>
21            </div>
22            <div class="pink-box"></div>
23          </div>
24          <div class="red-box"></div>
25        </div>
26      </div>
27      <div class="orange-box"></div>
28    </div>
29  </body>
30</html>

css
1@charset "UTF-8";
2
3/* clearfix用 */
4.clearfix::after {
5  content: '';
6  display: block;
7  clear: both;
8}
9
10.wrapper {
11  width: 400px;
12  margin: auto;
13}
14
15.blue-box {
16  width: 400px;
17  height: 100px;
18  background-color:#141f40;
19}
20
21.green-box {
22  width: 150px;
23  height: 250px;
24  background-color:#80bfa8;
25  float: left;
26}
27
28.midright {
29  width: 250px;
30  float: left;
31}
32
33.midright2 {
34  width: 150px;
35 float: left;
36}
37
38.yellow-box {
39  width: 150px;
40  height: 50px;
41  background-color:#dbd400;
42}
43
44.lightblue-box {
45  width: 150px;
46  height: 100px;
47  background-color:#0093b7;
48}
49
50.pink-box {
51  width: 100px;
52  height: 150px;
53  background-color:#ff9e6b;
54  float: left;
55}
56
57.red-box {
58  width: 250px;
59  height: 100px;
60  background-color:#8c2727;
61}
62
63.orange-box {
64  width: 400px;
65  height: 100px;
66  background-color:#d98d30;
67}