WordPress テーマ 自作のススメ

今回は、先の記事 「ブロックレベルとインライン」 で少し解説した
display プロパティ と同様に、レイアウトデザインを行う際に多用するであろう、
float プロパティ について解説します。

よく、「float (フロート) プロパティはボックスを左または右に寄せて配置し、
続く内容を回り込ませる」という説明を目にします。
「ボックスって何なのさ」という方は、先の記事 「margin と padding と ボックス」 を
参照してください。

float は直訳すると「浮く」となります。
float プロパティはボックスを浮かせて左右に寄せ、次に続く要素を
その下に潜り込ませて空いているスペースに表示させるので、
続く内容が回り込んでいる (ように見える) のです。
 

分かりやすいように色と太さを変えて、枠線 (border) をつけてみます。

<div style="border: 1px solid #999999; padding: 5px;">
	<div style="border: 1px solid #ff0000; float: left;">　float: left　</div>
	<div style="border: 1px solid #0000ff;">　float: なし　</div>
</div>

「float: left」 している赤枠の下に、「float: なし」 の青枠が潜り込んでいるのが
分かります。
 

では、「float: なし」 のボックスに float を指定して、「float: right」 にしてみます。

<div style="border: 1px solid #999999; padding: 5px;">
	<div style="border: 1px solid #ff0000; float: left;">　float: left　</div>
	<div style="border: 1px solid #0000ff; float: right;">　float: right　</div>
</div>

.clear {
	clear: both;
}