こんにちは。
今回は、
右寄せ、左寄せをする方法 を解説します
ネットで検索しました。
↓
- float: left;
- 左に浮かせて移動させ、続く要素は右に回り込む。
- float: right;
- 右に浮かせて移動させ、続く要素は左に回り込む。
- float: inherit;
- 親要素のフロートの値を継承。
- float: none;
- フロートの指定はなし。初期値。
つまり、
box1、box2
左寄せ、右寄せの時は
↓
box1、box2
左寄せの時は
↓
また、floatには、浮くと言う意味もあります。
前回のブログを図にして見ました。
floatのボックスは、回り込みつつ、浮いている状態です。
また、floatという英語の意味は、「浮く」 ということも頭に入れておきましょう！
だから、次に来る緑のボックスが隙間に入り込んでしまったのですね。
それを防ぐ解除方法も覚えておきましょう！
【解除する方法】
clear:left; / clear:right;とありますが、それらをまとめて
clear：both; と書いてしまえばOK！
【注意すること】
※widthを指定する！floatされない。
※解除を忘れない！ 解除しないとfloat以下の構造がおかしくなってしまう。
その点に注意して、floatをマスターしていきましょう！！