18 ホームページ制作基礎講座 CSS編 float

Webサイト制作
Yoshiko先生
Yoshiko先生

HTMLのsection 内に入っている画像周りこみを制御するcss18回目となります。画像と文章のまわりこみ「float」に関しての説明動画です。

はてな女史
はてな女史

フロートはがどうにもうまくできません。すごく壊れたりするし・・・わからないところが多いです。

Yoshiko先生
Yoshiko先生

ですよねーfloat は、浮く・・・という意味も持っているので、width や height などしっかりと幅・高さがないとうまくバランスをとって横並びになってくれません。また下の要素で解除しないとデザインが崩れる原因にもなります。float は壊れやすいので、最近ではdisplay : flex も出てきていますので合わせて学習してみてください。

folatで画像が左、文章が右の周りこみ

.l_float {
     float: left;
     margin-right: 1em;
 }

folatで画像が右、文章が左の周りこみ

.r_float {
     float: right;
     margin-left: 1em;
 }

float を解説した動画

18 ホームページ制作基礎講座 CSS編 float
タイトルとURLをコピーしました