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 サイトの他の関連記事を参照してください。