floatで、divを横並びにする方法を模索した話

真琴

HTMLっていうのは、基本的に要素を勝手に縦に並べていくものらしい。

▼四角（div）を2つ作ると

<body>
   <div class="box1">box1</div>
   <div class="box2">box2</div>
</body>

▼こんなふうに自動的に縦に並ぶ。

キャプチャ


これを横並びにする方法はいくつかあるのだけど、そのうちの1つ「float」を使った方法を習った。

floatは文字通り、要素を浮かす力があり、

float: right;→それ自身を画面の右側に浮かべて、後に続く要素を左側に詰めさせる

float: left;→それ自身を画面の左側に浮かべて、後に続く要素を左側に詰めさせる

▼CSS

.box1 {
   float: right; /* 画面の右側に浮かべて、後に続く要素を左側に詰めさせる */
   width: 100px;
   height: 100px;
   background-color: #F7DDDB ;
}

.box2 {
   width: 100px;
   height: 100px;
   background-color: #B7D8E5 ;
}

▼box1が浮かんで、右側にずれて、その分box2が上に詰められた状態

キャプチャ


▼box3を増やして、今度はbox2をfloat: right:してみた。

キャプチャ2


先生に言われるがままコード書いたらこうなったんだけど、最初はわけがわからないよ！って感じだった。

私なりに調べてかみ砕いて、下手なりに図解してみた。

▼多分、float: right;ってこういうことだと思う。


名称未設定のアートワーク


うーん…ちょっと待って。なんか違うかも。

floatしたやつ、着地しないかも。

よくわかんないから、もう一回図作りなおそ。

この記事が気に入ったらサポートをしてみませんか？