CSSのfloatとは何ですか

CSS におけるフローティングとは、要素を左右に移動することを指し、その周囲の要素も再配置されます。フローティング要素は、その外端が包含ボックスまたは別のフローティング ボックスの境界線に触れるまで、できるだけ左または右に移動します。

#この記事の環境: Windows10、css3、この記事はすべてのブランドのコンピューターに適用されます。

Float 入門:

CSS Float (フロート) は要素を左右に移動し、周囲の要素も再配置します。

Float(フロート)は画像によく使われますが、レイアウトにも非常に便利です。

(学習ビデオ共有:

css ビデオ チュートリアル)

要素はどのように浮くのでしょうか?

要素の水平浮動方向は、要素が左右にのみ移動でき、上下には移動できないことを意味します。

フローティング要素は、その外縁が包含ボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動しようとします。

float 要素の後の要素がそれを囲みます。

フローティング要素の前の要素は影響を受けません。

画像が右フローティングの場合、次のテキスト フローが左に回り込みます:

例:

img{
    float:right;
}

フローティング要素が隣り合う

複数の浮動要素を一緒に配置すると、スペースがあればそれらは隣り合います。

例:

画像ギャラリーに float 属性を使用する:

.thumbnail {
    float:left;    
    width:110px;    
    height:90px;    
    margin:5px;
}

Float をクリア - Clear を使用した後

要素がフローティングされると、周囲の要素がこれを回避するには、clear 属性を使用します。

clear 属性は、フローティング要素を要素の両側に表示できないことを指定します。

例:

clear 属性を使用してテキストに画像ギャラリーを追加します:

.text_line{
    clear:both;
}

関連する推奨事項:

css チュートリアル

以上がCSSのfloatとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。