CSSレイアウト float編

最初に習うレイアウトかな？

Floatとは

対象の要素を左（右）に寄せて、後から続く要素のテキストを反対側に周りこませます。雑誌や新聞記事のような参考画像と文書を表現できるレイアウトですね。

要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。

mdn

ちょっと何言っているかわかんないけど、簡単に説明すると、floatにされた要素は、通常の配置フローから外れます。浮いた感じ。

空いた領域にはそれ以降の要素が詰めてきます。

floatされた要素は左（右）側に再配置されますが、詰めてきた要素と重なります。

float要素と詰めてきた要素は重なるのだが、テキストは重ならない。詰めてきた要素のテキストは押し出されて表示される。

このとき、”float要素の周りをテキストが周りこむ”、”基準のレイヤーから一段浮いた状態”、と表現されることが多い。

吾輩は猫である。名前はまだ無い。

どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。

使い方

HTML

<div class="float-left">
    IMG
</div>
<p>Doc...</p>

CSS

.float-left {
    float: left;
}

↓これが↓

↓こうなります↓

周りこみを解除する

要素にfloat:leftを与えると解除するまで回り込んできます。floatを解除してみましょう。

解除する要素にclear: both;を与えます。

3行目が回り込まなくなりましたね。

親要素の高さが無くなる

子要素を全てfloatにしてしまうと中身の高さが0になってしまいます。親要素の高さも0になってしまいます。

親要素にサイズの指定が無い場合は、子要素に依存します。

親要素のサイズ変化を確認

適当なブロック3つを用意しました。ブロック要素なので縦に並んでいます。

試しにブロック1、2をfloatしてみます。するとブロック1、2はfloatして寄せられ、その分親要素の高さが小さくなりました。

ブロック3のテキストはこんな位置に表示されるんだなと。

ブロック1、2、3をfloatを当てます。親要素の高さが無くなりました。背景の一部が薄っすら残っていますね。

親要素にclearfixを追加します。親要素のafter擬似要素にclear:bothを当てます。

高さが戻りました。

HTML

<div class="box1 clearfix">
 <div class="box2 float">1</div>
 <div class="box3 float">2</div>
 <div class="box4 float">3</div>
</div>

CSS

.float {
 float: left;
}

.clearfix::after {
 content: "";
 clear: both;
 display: block;
}

その他

子猫のレイアウト画像: くつろぐ猫