floatを利用した図の配置の仕方

cssでfloatを学んでいて疑問に思ったのですが
以下のコードの場合

　　```html


   ```css
 .green{
    background-color: green;
    width: 200px;
    height: 400px;
    float: left;
    
    
  }
  .yellow{
    background-color: yellow;
    width: 200px;
    height: 200px;
    float: left;
   
    
  }
  .red{
    background-color: red;
    width: 200px;
    height: 200px;
    clear: left;  
}

実行した結果greenの図が左端にありその右にyellowの図が横並びになりred
の図はgreeの下に配置され回り込みが回避されている状態なのですが
__これを左端にgreenその右にyellow、yellowの下にredを配置するにはどのようにしたらよいですか？__
.yellowの中にposition:relative .redの中にposition:absoluteをいれたりしましたけどうまくいきません
お力添えをよろしくお願いいたします

kei344

2020/02/26 13:35

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

nomeMetro

2020/02/26 14:17

ご指摘、ご指導ありがとうございます。それを元に少し直して見ましたまた、今度質問する際はご指摘の所に気を付け、テンプレートを用いて質問するようにいたします

kei344

2020/02/26 14:55

編集ありがとうございます。まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。もし解決されていないなら状況を質問文に追記ください。

nomeMetro

2020/02/26 22:39

度々ありがとうございます解決済みに致しました色々とありがとうございました

行動規範の内容に同意します

回答1件

ベストアンサー

今のマークアップでできる方法がぱっと思いつかないので、HTML のマークアップを変える方法を2つ回答します。

WEB 制作でよくやるのは、.yelloと.redを一つにまとめる方法だと思います。
.rowでそれらをまとめるマークアップをして、

html
1<div class="green"></div>
2<div class="row">
3  <div class="yellow"></div>
4  <div class="red"></div>
5</div>
6

CSS で.greenと.rowで縦に分けるグリッドを作って、.yellowと.redはそのまま.rowの中にスタックしています。
この場合は、clearfix を親要素につける必要があります。

css
1.green {
2  background-color: green;
3  width: 200px;
4  height: 400px;
5  float: left;
6}
7
8.row {
9  float: left;
10}
11
12.yellow {
13  background-color: yellow;
14  width: 200px;
15  height: 200px;
16}
17
18.red {
19  background-color: red;
20  width: 200px;
21  height: 200px;
22}
23
24.clearfix::after {
25  content: '';
26  display: block;
27  clear: both;
28}

CSS Grid を使えるなら以下のようにもかけます。
マークアップに全体をまとめる.containerを追加して、

html
1<div class="container">
2  <div class="green"></div>
3  <div class="yellow"></div>
4  <div class="red"></div>
5</div>

CSS でグリッドに関するスタイルをつけるとできると思います。
この方法では float は不要なので、clearfix もなくコードはシンプルになります。

css
1.container {
2  display: grid;
3  grid-template-rows: repeat(2, 200px); 
4  grid-template-columns: repeat(2, 200px); 
5}
6
7.container > .red {
8  grid-column-start: 2;
9  grid-row-start: 2;
10}