CSS float 属性
定義と使用法
float 属性は、要素がどの方向に浮揚するかを定義します。過去にはこの属性は画像にのみ適用され、テキストが画像の周りに回されましたが、CSSではどんな要素でも浮揚できます。浮揚要素は、それ自体がどんな要素でも、ブロックレベルのフレームを作成します。
フロート非置換要素に対して、明確な幅を指定する必要があります；そうしないと、それらは可能な限り狭くなります。
注釈：フロート要素に対して一行以上に十分なスペースがなく、少ないスペースしかない場合、その要素は次の行に移動し、その行に十分なスペースがあるまでこのプロセスが続きます。
別の参照：
CSS 教程：CSS 定位
HTML DOM 参考手册：cssFloat 属性
CSS 语法
float: none|left|right|initial|inherit;
属性値
| 値 | 説明 |
|---|---|
| left | 要素は左側に浮揚します。 |
| right | 要素は右側に浮揚します。 |
| none | デフォルト値。要素は浮揚せず、テキストに現れる場所に表示されます。 |
| inherit | 親要素から float 属性の値を継承することを指定します。 |
技術的詳細
| デフォルト値： | none |
|---|---|
| 継承性： | no |
| バージョン： | CSS1 |
| JavaScript 语法： | object.style.cssFloat="left" |
TIY 実例
- float 属性の簡単な適用
- 画像を段落の右側にフロートさせる
- 枠と境界を持つ画像を段落の右側にフロートさせる
- 画像を段落の右側にフロートさせ、画像に枠と境界を追加します。
- タイトル付きの画像を右側にフロートさせる
- タイトル付きの画像を右側にフロートさせます。
- 段落の最初の文字を左側にフロートさせる
- 段落の最初の文字を左側にフロートさせ、その文字にスタイルを追加します。
- 水平メニューを作成する
- 一つの超リンクを持つフロートを使用して水平メニューを作成します。
- テーブルなしのホームページを作成する
- ヘッダー、フッター、左側の目次、本文の主体内容を持つホームページを作成するためにフロートを使用します。
ブラウザのサポート
このテーブルの数字には、その属性を完全にサポートする最初のブラウザのバージョンが示されています。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
