■ Webデザインを学ぶ【初級/後編】,  ◎ レイアウトを学ぶ

floatの基礎①

初心者のためのfloat基礎

画像の説明の横に画像を挿入してみましょう。まずは、親要素となるセクションを作成し、その中に「見出し」「画像」「テキスト」の順に記述していきます。CSSに、「右に回り込ませる」というクラスセレクタを作り、回り込ませたい要素に充てます。

注意点は、floatを使うと、セクション(親要素)の中にある子要素(中にある要素)はfloat(浮いた)状態になり、親要素の高さはなくなってしまいます。したがって、全体を包囲させることができなくなるのでセクションに、overflow:hiddenを記述しておく必要があります。
▶ float(回り込みプロパティ 初級前編を見る)

【HTML】画像が回り込む


また、画像を段落p要素の中に入れ、p要素に回り込みを充てる方法でも、ほぼ同じ結果が得られます。

【補足】基本的に、bodyの中にある要素は、すべてブロック要素の中に入れて記述することが原則となっています。img要素は、インライン要素なので、ブロック要素の中に入れて記述することが正解ですが、すでにセクションの中に挿入されていますので、特に段落pに入れずに、直接記述しても問題ないでしょう。

See the Pen
float_001
by nakatax (@cocohp)
on CodePen.