記事一覧

float の指定と挙動

 posted by suzu
CSSの基礎知識

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

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

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

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

 float: left 
 float: なし 
<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」 にしてみます。

 float: left 
 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>

・・・あれ
(ノ゚⊿゚)ノ おかしいことになってませんか?
グレー枠の親ボックスから float を指定した子ボックスがはみ出し、
親ボックスの高さが縮んでいます。

これは、子ボックスが全て 「浮いてる」 ために、
親ボックスは中身がないのと同じ挙動をしてしまっているのです。
中身がないわけですから、こういう状態では、margin や padding は効きません。
お気を付けください。

ちなみに、float による回り込みを解除したい場合は、次の回り込みをさせたくない
(ブロックレベル) 要素に、clear プロパティを付けます。

.clear {
	clear: both;
}

外部CSSで上記のように指定して、HTMLでは要素にクラスを指定するのが
一般的ですね。

関連記事

eyecatch_css

セレクタの優先順位

CSS命令を適用する範囲である「セレクタ」には優先順位があります。 これが分かっ...

記事を読む

eyecatch_css

ブロックレベルとインライン

CSSでデザインする際に、HTMLタグ要素が ブロックレベル要素であるかインライ...

記事を読む

eyecatch_css

width プロパティの適用範囲

CSS でデザインをしていく際には、(特にボックスに対して) width プロパ...

記事を読む

カレンダー

2019年10月
« 7月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
PAGE TOP ↑