CSSfloatプロパティ_
例
画像を右に浮かせます。
img
{
float: right;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このfloat
プロパティは、要素を左にフロートさせるか、右にフロートさせるか、まったくフロートさせないかを指定します。
注:絶対に配置された要素はfloat
プロパティを無視します!
注:フローティング要素の隣の要素はその周りを流れます。これを回避するには、 clearプロパティまたはclearfixハックを使用します(このページの下部にある例を参照してください)。
デフォルト値: | なし |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS1 |
JavaScript構文: | オブジェクト.style.cssFloat = "left" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS構文
float: none|left|right|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
画像を左に浮かせます。
img
{
float: left;
}
例
テキストのどこに画像が表示されるか(float:none):
img
{
float: none;
}
例
段落の最初の文字を左に浮かせて、文字のスタイルを設定します。
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
例
ハイパーリンクのリストとともにfloatを使用して、水平メニューを作成します。
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
例
floatを使用して、ヘッダー、フッター、左側のコンテンツ、およびメインコンテンツを含むホームページを作成します。
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
例
指定された<p>要素の左側または右側にフローティング要素を許可しないでください。
img {
float: left;
}
p.clear {
clear: both;
}
例
フローティング要素がそれを含む要素よりも高い場合、それはそのコンテナの外にオーバーフローします。「clearfixハック」でこれを修正することが可能です:
.clearfix::after {
content: "";
clear: both;
display: table;
}
関連ページ
CSSチュートリアル:CSS Float
HTML DOMリファレンス: cssFloatプロパティ