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

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

1.1 ドキュメントフロー

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

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

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

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

1.3 float 属性の紹介

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

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

③ none: デフォルト値。

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

1.4 例

CSS float 浮动属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>2.3-float属性</title>
    <style type="text/css">
        #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></head><body><p id=a >p-a</p><p id=b>p-b</p><p id=c>p-c</p><input type="text" value="input1"  /><input type="text" value="input2" /><input type="text" value="input3 " /><p id=d>p-d</p><input type="text" value="input4 " /></body></html>

ログイン後にコピー

2. float:left

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

p-B 追加: Float: LeFT

P-D 追加: Float: Left

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

CSS float 浮动属性

② ブラウザの幅が「十分に長い」場合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 ビューを変更する

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

CSS float 浮动属性

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

CSS float 浮动属性

3.3 結論

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