float : left

以下のコードで一番上段の「.yellow」にもfloat設定をすること。設定しないとfloatしない。


.yellow{
 background-color: yellow;
 width: 200px;
 height: 250px;
 float: left;
}
.green{
 background-color: green;
 width: 150px;
 height: 100px;
 float: left;
}
.pink{
 background-color: pink;
 width: 500px;
 height: 80px;
 float: left;
}

最下段の「.pink」にfloatを設定しないと上段の要素に隠れてしまう。

floatの解除は clear:left を設定する。

.pink{
background-color: pink;
width: 500px;
height: 80px;
clear: left;
}


CSS floatプロパティの基礎をわかりやすく解説!CSS…|Udemy メディア (benesse.co.jp)