左と中央カラムのコンテナ:後から記述する右側カラムに float:right を指定しているので、この要素は左側に回りこむ
先に記述したい中央カラム

周囲に<margin: 20px>をとった<p>要素: 親の div要素に float属性を付けているのでマージンの相殺が起きない。

後に記述したけれど左にしたいカラム

周囲に<margin: 20px>をとった<p>要素

左・中央カラムの下に記述したい要素   clear: left; を指定
右側カラム  float: rightを指定

周囲に<margin: 20px>をとった<p>要素

一旦全てのフロートをリセットするための div要素  clear: both; を指定
左と中央カラムのコンテナ-2
先に記述したい中央カラム-2

周囲に<margin: 20px>をとった<p>要素: 親の div要素に float属性を付けているのでマージンの相殺が起きない。

後に記述したけれど左にしたいカラム-2

周囲に<margin: 20px>をとった<p>要素

左・中央カラムの下に記述したい要素   clear: left; を指定
右側カラム-2

周囲に<margin: 20px>をとった<p>要素