float プロパティ
float プロパティは、テキストが周囲を流れる（回り込む）浮動要素を設定します。
float プロパティは、要素の回り込みを解除する clear プロパティと組み合わせて使用されることがあります。
本来 float は、テキスト内に流し込まれる要素のために考案されたものですが、
現在では、レイアウト構築のため、非常に広範に非標準的な方法で使用されています。
構文
セレクタ {
float: left | right | none;
}
セレクタ {
clear: both | left | right | none;
}
float の値
| 値 | 説明 |
|---|---|
left |
要素は左側に浮動し、テキストはその右側を流れます。 |
right |
要素は右側に浮動し、テキストはその左側を流れます。 |
none |
回り込みは発生しません。 |
初期値: none。
clear の値
| 値 | 説明 |
|---|---|
left |
左側からの回り込みを解除します。 |
right |
右側からの回り込みを解除します。 |
both |
左右両方からの回り込みを解除します。 |
none |
回り込みの解除を行いません。 |
初期値: none。
例
float を非標準的な方法で使用し、リスト項目を横並びに配置します:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
li {
float: left;
border: 1px solid red;
}
:
関連項目
-
上位要素に対する float を解除するプロパティ
clear
