【初心者ノート】WEBデザイン HTML CSS ボックスの回り込み

htmlのアイキャッチ

前回までの記事で、HTMLCSSボックスモデルについて説明しました。

ブラウザはコンテンツを表示するとき、HTMLの各要素(body、div、h1、pなど)をボックスとして扱い、HTMLに記述されている順に画面上に配置していきます。

WEBページをデザインするにあたり、コンテンツ(ボックスの内容)を左右に並べたいことがあります。

このようなことを実現するのが、フロート(float)の考え方です。

ボックスのフロート

HTML、CSSのボックスフロートの前後イメージ

上のように、写真の右側に段落の文書を配置してみましょう。

例で使用するHTMLは次のとおりです。

CSSでは、img要素に対してfloatを設定します。

ブラウザはこの記述により、写真(img)の入ったボックスを手前に浮き上がらせます。

写真のボックスが浮き上がるとそのスペースにはボックスがない状態とみなされ、後にある段落の文章のボックスや、さらに次の2つ目のdivのボックスが詰められます

写真のボックスの下に後続のボックスが潜り込んだ状態ですね。

このままだと段落の文章(p)や、次のdivにある見出し(h2)が写真に隠れてしまいますので、ブラウザはボックスはそのままで、中のコンテンツだけを見える位置(この場合は右側)に移動させます。

この動きを表したのが次のアニメーションです。

HTML、CSS ボックスモデルのフロートを表したアニメ

ボックスのフロート解除(潜り込み禁止)

先ほどの例で写真の右側に文章を配置できましたが、2つ目のdiv要素の見出しや写真などの配置がおかしくなってしまいました。

1枚めの写真がフロートすることにより、そのスペースに意図しないボックスも一緒に詰められたためです。

意図していたのは、2つ目の見出し(h2)や写真は左詰めのまま表示することです。
つまり、2つ目のdiv要素のボックスは写真の下に潜り込まないようにしなければなりません。

CSSでは、フロートしたボックスの下に他のボックスが潜り込まないように解除する方法が用意されています。
解除する方法はいくつかありますが、ここでは「clear: both」というパラメータを使います。

clear: bothが指定されたボックス(div)は、フロートされたボックス(img)への潜り込みが禁止されます。
これにより、ブラウザの画面には意図した通りのイメージが表示されます。

HTML、CSS ボックスモデルのフロートを表したアニメ

まとめ

float を使ったときの写真、文字などの左右への配置のイメージをつかんでいただけたでしょうか。

今回の例では、正確にはボックスが回り込むのではなく、ボックスの中身の写真や文章が回り込んで配置されるということです。
したがってclear: both で「回り込みが解除」されるのではなく、「潜り込みが禁止」されると考えたほうが、理解しやすいと思います。

「clear: both」以外にも、「overflow: hidden」や「clearfix」などの方法もありますが、これらは別の機会にまとめたいと思います。

HTML、CSSのボックスモデルの考え方については、以下のページを参照して下さい。

HTML、CSSについて細かく知るには次のサイト(外部)が参考になります。

スポンサーリンク

シェアする

フォローする

スポンサーリンク