ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS属性におけるfloat属性の役割は何ですか
cssにおけるfloat属性の役割は要素の移動を制御することであり、要素が左右に移動しても周囲の要素も並び替えられ、要素の横方向は浮動し、つまり、要素は左右にのみ移動でき、上にも下にも移動できません。フローティング要素は、その外縁が包含ボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動しようとします。
このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター
css属性のfloat属性?
float、CSS の属性、主な属性値は次のとおりです: left (左フローティング)、none (非フローティング)、right (右フローティング)、inherit (親要素の float を継承)、主に使用される Web ページのレイアウト。
CSS Float は要素を左右に移動し、周囲の要素も再配置します。
Float(フロート)は画像によく使われますが、レイアウトにも非常に便利です。
要素の浮遊方法
要素は水平方向に浮動します。つまり、要素は左右にのみ移動でき、上下には移動できません。
フローティング要素は、その外縁が包含ボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動しようとします。
float 要素の後の要素がそれを囲みます。
フローティング要素の前の要素は影響を受けません。
画像が右側にフローティングされている場合、次のテキスト フローは画像の左側に折り返されます:
例
img { float:right; }
フローティングされた要素が隣り合う
複数のフロート要素をまとめて配置すると、スペースがあればそれらは隣り合います。
ここでは、画像ギャラリーに float 属性を使用します。
Example
.thumbnail { float:left; width:110px; height:90px; margin:5px; }
Float のクリア - Clear
Element を使用します。 float その後、周囲の要素が再配置されるため、これを回避するにはclear属性を使用します。
clear 属性は、フローティング要素を要素の両側に表示できないことを指定します。
clear 属性を使用してテキストに画像ギャラリーを追加します:
例
.text_line { clear:both; }
推奨される学習: "css ビデオ チュートリアル "
以上がCSS属性におけるfloat属性の役割は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。