2.9 float

フロートfloatプロパティについては、Wordにおける回り込みとよく似ている。昔は、htmlコードで指定していたが、最近はCSSで指定するよう勧告され、htmlでの指定は非推奨となっている。

floatの設定値 説明
float:none;floatを指定しない（初期値）
float:left;左寄せ、後続は右側に回り込み
float:right;右寄せ、後続は左に回り込み

設定は3通り。ブラウザによってサポートされているものがあるが、一般的にどのブラウザでも対応しているのは、上記3つのみであろう。

残念ながら、Wordのように文書の真ん中に画像を配置し、両サイドに文字を回り込ませることは、どうもできないようである。まあ、それほど必要性があるとも思えないが・・・

このfloatを使って、前節の横並びメニュー表示も可能ではあるが、flexの方が使い勝手が良さそうである。

基本的には、画像の周りに文章を回り込ませるのが、そもそもの目的であろうから、そのような例を使って使い方を学習してみよう。

<div style="float:left; width:200px; height:100px; background-color:green;">
 box
</div>
<p>これは、テスト文章です。これは、テスト文章です。・・・・</p>

のように、書いてみると、

box

これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。

・・・・・・・・・・・・・・・・・・・・・・・・・・・・

このように後続の文章は右に回り込むようになる。しかし、章を改める場合など、回り込みを止めたい場合もあり、その場合はclearプロパティを使う。

clearの設定値 説明
clear:left;左寄せされた要素に対する回り込みを解除
clear:right;右寄せされた要素に対する回り込みを解除
clear:both;全ての要素に対する回り込みを解除

その他、clear:none;（初期値、解除しない）というのもあるが、通常使わないのではなかろうか？

<div style="float:left; width:200px; height:100px; background-color:green;">
 box
</div>
<p>これは、テスト文章です。これは、テスト文章です。・・・・</p>
<p style="clear:both;">clear:bothで、ここから回り込みを禁止します。</p>

のようにすると、

box

これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。

clear:bothで、ここから回り込みを禁止します。

clear:left;でもよかったのだが、その場合、上記には含まれないが、right指定の回り込みは禁止されない。

それでは、right指定の場合も見てみよう。

box

これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。これは、テスト文章です。

clear:bothで、ここから回り込みを禁止します。

となる。

絵を複数配置して回り込み指定をすると、サイズ不足で下段に繰り下げられることがある。そのような場合、Webブラウザで確認をしながら、適切な対処が必要だろう。

float要素を複数設定した場合のことも議論したかったが、必要があれば記述するということにして、この程度で次に進むことにする。


次は、グリッドレイアウトについて、CSSの基礎パート１０である。