CSS float フローティング プロパティ

この記事では、要素が浮動する方向を定義する float 属性を主に紹介します。

目次:

1. ページレイアウト方法: ドキュメントフロー、フローティングレイヤー、フロート属性の紹介。

2. float:left: float を左にした場合のレイアウト方法を紹介します。

3. float:right: float が right の場合のレイアウト方法を紹介します。

4. 隣接する要素にfloat属性が含まれる: 隣接する要素にfloat属性が含まれる場合のレイアウト方法を紹介します。

1. ページ レイアウト方法

ページ レイアウト方法には主に、ドキュメント フロー、フローティング レイヤー、フロート属性が含まれます。

1.1 ドキュメント フロー

HTML ページの標準的なドキュメント フロー (デフォルト レイアウト) は、上から下、左から右で、ブロック (ブロック レベルの要素) に遭遇すると改行が入ります。

1.2 フローティング レイヤー

フローティング レイヤー: 要素の float 属性に値を割り当てた後、ドキュメント フローから分離され、親要素の左右の境界線の近くで左右にフローティングします (デフォルト)は本文エリアです）。

浮動要素は、ドキュメント フローの空いた位置にある後続の (非浮動) 要素によって埋められます。ブロック レベルの要素は直接埋められます。範囲が浮動要素と重なる場合、浮動要素はブロック レベルをカバーします。要素。インライン要素: スペースがある場合は挿入します。

1.3 float 属性の紹介

① left: 要素は左にフロートします。

② right: 要素は右にフロートします。

③ none: デフォルト値。

④inherit: 親要素からfloat属性を継承します。

1.4 例

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <title>2.3-float属性</title>
    <style>
        #a        {
            background-color:Red;
            height:50px;
            width:100px;
        }
        #b        {
            background-color:Yellow;    
            height:50px;
            width:200px;
        }
        #c        {
            background-color:Blue;   
            height:50px;
            width:300px;
         }
         #d         {
            background-color:Gray;
            height:50px;
            width:400px;
         }

    </style><p>p-a</p><p>p-b</p><p>p-c</p><input><input><input><p>p-d</p><input>

2. float:left

説明: 要素は左に移動します。更2.1 コード変更 1INPUT2 追加: Float: left

p-B 追加: Float: LeFT

P-D 追加: Float: Left

2.2 変更後の見方 ① ブラウザの幅が「長くない」

② ブラウザの幅が「十分に長い」場合2.3 結論現在の要素カテゴリ (フロート: 左) 次に隣接する要素カテゴリ(floatを除く)結論ブロックレベル要素(a)ブロックレベル要素(b)bはaによって残されたスペースを埋め、aはbと重なり、 aの層が一番上にあります。 インライン要素(b)bはaの直後に続きます。そして、独自のインライン要素の特性に応じて、ラップするかどうかを決定します。 インライン要素(a)ブロックレベル要素(b)bはaの動きには追従しません。 🎜🎜🎜インライン要素(b)🎜🎜bはaの直後に続きます。そして、独自のインライン要素の特性に応じて、ラップするかどうかを決定します。 🎜🎜🎜🎜

3. float:right

説明: 要素は右に移動します。

3.1 コード変更

input2要素：float:right

p-bを追加：float:right

p-dを追加：float:right

3.2 ビューを変更する

①ブラウザの幅が「長さが足りない」場合「

②ブラウザの幅が「十分に長い」場合

3.3 結論

現在の要素分類(float:right)	次の隣接要素分類( float は含まれません)	結論
ブロックレベル要素(a)	ブロックレベル要素(b)	bは、aがbと重なっている場合(親コンテナの幅)を埋めます。は縮小されます）、a のレイヤーが一番上にあります。
	インライン要素 (b)	b は、a によって残されたスペースを埋めます。
インライン要素(a)	ブロックレベル要素(b)	bはaの動きには追従しません。
	インライン要素 (b)	b は、a によって残されたスペースを埋めます。

4. 隣接する要素には float 属性が含まれます

インライン要素の特性により、インライン要素およびブロックレベルの要素に隣接して float 属性を使用しないことをお勧めします。

以下は例としてブロックレベル要素です:

Default view:

4.1 float:left

これら3つのpにfloat:left

4.1.1を追加します

①ブラウザの幅十分な長さ

②ブラウザの幅が「長さが足りない」

4.1.2 結論

Ⅰ 隣接するフローティング要素、つまり最前面の左属性を持つ要素は、最も左にランクされます。

Ⅱ フローティング要素になった後は、フローティング層のインライン要素の「特性」を持ち、複数のフローティング要素が1行に収まらない場合は折り返されます。

4.2 float:right

float:rightを追加

4.2.1 view

①ブラウザの幅が「十分に長い」

②ブラウザの幅が「長さが足りない」「

」

4.2.2 結論

Ⅰ 隣接する浮動要素のうち、前にある右の属性を持つ要素は右端に位置します。

Ⅱ フローティング要素になった後は、フローティング層のインライン要素の「特性」を持ち、複数のフローティング要素が1行に収まらない場合は折り返されます。

4.3 高さの異なるブロックレベルの要素

p-a の高さの値を p-b より大きく設定し、3 つの ps 全てに float:left を追加します:

4.3.1 View

①ブラウザの幅は「十分な長さ」

②ブラウザの幅を小さくした場合

③ブラウザの幅をさらに小さくした場合

4.3.2 結論

Ⅰ 高さ 等しくないp浮動要素をソートすると、リンクされた要素の「特性」は、複数の浮動要素が 1 行に収まらない場合に折り返されることです。

4.3.3 ブラウザの幅縮小変形の解決

pにfloat属性を持つp要素を埋め込み、このpにwidth属性とheight属性を追加します。ブラウザの幅を縮小した場合は変形しません。 php中国のWebサイトを介してCSSフロートフローティング属性関連記事を参照してくださいCSS HTML要素レイアウトと表示属性の導入を参照してください