css floatが折り返されない

Web ページ作成の過程では、CSS の float 属性を使用して複数の要素を同じ行または列に配置することがよくあります。ただし、浮動要素が次の行に割り当てられる場合があるため、このとき浮動要素が折り返されないようにいくつかのスキルを習得する必要があります。

1. フロートのクリア

フローティング要素の幅が設定されていない場合、デフォルトで親要素の幅を占有します。親要素の高さが十分でない場合、浮動要素は次の行に「押し込まれ」ます。では、この問題をどうやって解決すればいいのでしょうか？クリアフロートテクニックを使用できます。 float をクリアする一般的な方法は次のとおりです:

1. 以下に示すように、clearfix

を使用して、親要素の CSS スタイルに「clearfix」クラスを追加します。 ##HTML では、以下に示すように、クラス名「clearfix」を親要素に追加します:

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

2. 疑似クラスを使用して float をクリアします

疑似クラス ":before" を追加します親要素の CSS スタイルの「」 または、以下に示すように「:after」:

<div class="clearfix">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

HTML では、以下に示すように、クラス名「parent」を親要素に追加します:

.parent:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

2. display: inline-block を使用する

フローティング要素が折り返されないようにフロートをクリアすることに加えて、「display: inline-block」属性を使用することもできます。この属性により、要素にインライン ブロック レベル要素の特性を持たせることができ、同じ行表示を維持したまま高さを設定できます。

<div class="parent">
    <div class="float-left">Left</div>
    <div class="float-left">Left</div>
</div>

3. 幅の設定を使用する

フローティング要素に幅が設定されている場合、親要素の高さが十分でない場合でも、同じ行に表示されます。

<div style="display: inline-block;">Inline-block</div>
<div style="display: inline-block;">Inline-block</div>

4. エラスティック レイアウトを使用する

エラスティック レイアウトは CSS3 が提供するレイアウト方法で、複数の要素を同じ行または列に配置する場合に非常に便利です。フレキシブル レイアウトを使用するには、親要素に「display: flex」属性を設定して、子要素がアダプティブ レイアウトを実行できるようにするだけです。

<div style="width: 50%; float: left;">Left Float</div>
<div style="width: 50%; float: left;">Right Float</div>

上記はフローティング要素の回り込みを防ぐ方法をいくつか示していますので、状況に応じて適切な方法を選択してください。

以上がcss floatが折り返されないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。