ホームページ > 記事 > ウェブフロントエンド > css floatのプロパティは何ですか?

css floatのプロパティは何ですか?

青灯夜游オリジナル: 2020-12-15 13:48:405611ブラウズ

CSS のフローティング属性は、「float」属性を指します。この属性は、ボックス (要素) をフロートさせるかどうかを指定し、どの方向にフロートさせるかを定義するために使用されます。要素が float 属性を使用した後、要素を標準フロー自体から分離して他の要素の上に浮かせることができるため、要素が元々属していたスペースを占有しなくなります。

この記事の動作環境: Windows10 システム、css3 バージョン、Dell G3 コンピューター。

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

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

1.1 ドキュメントフロー

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

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

フローティングレイヤー: 要素の float 属性に値を代入した後、ドキュメントフローから切り離され、左右にフローティングして閉じます。親要素に追加します (デフォルトでは、本文はテキスト領域の左右の境界線です)。

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

1.3 Float 属性の概要

float 属性: ボックス (要素) を浮動させるかどうかを指定するために使用され、要素がどの方向に浮動するかを定義できます。

要素が float 属性を使用した後、要素を標準フロー自体から分離し、他の要素の上に浮かせることができるため、要素が元々属していたスペースを占有しなくなります。後続の要素を上に移動してマージします。要素に元々属していたスペースを占有します。

注: 絶対に配置された要素は float 属性を無視します。

属性値:

① left: 要素は左に移動します。

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

③ none：デフォルト値。

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

1.4 例

<!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>
<div id=a >div-a</div>
<div id=b>div-b</div>
<div id=c>div-c</div>
<input type="text" value="input1"  />
<input type="text" value="input2" />
<input type="text" value="input3 " />
<div id=d>div-d</div>
<input type="text" value="input4 " />
</body>
</html>

(推奨チュートリアル: CSS ビデオチュートリアル)

2. float:left

説明: 要素は左にフロートします。

2.1 コードの変更

input2 追加: float:left

div-b 追加: float:left

div-d追加：float:left

2.2 ビューの変更

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

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

2.3 結論

#インライン要素 (a)ブロックレベル要素 (b)b は a の動きに追随しません。 #インライン要素 (b)

3. float:right

説明: 要素は右にフロートします。

3.1 コードの変更

input2 要素: float:right

div-b を追加: float:right

div- d 追加：float:right

3.2 ビューの変更

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

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

3.3 結論

現在の要素分類 (float: left)	次に隣接する要素分類 (float を除く) )	結論
ブロックレベル要素 (a)	ブロックレベル要素 (b)	b は a によって残されたスペースを埋め、a は b に重なり、a のレイヤーが一番上になります。
ブロックレベル要素 (a)	#インライン要素 (b)	b は a の直後に続きます。そして、独自のインライン要素の特性に応じて、ラップするかどうかを決定します。

	b は a の直後に続きます。そして、独自のインライン要素の特性に応じて、ラップするかどうかを決定します。

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