オーバーフロー属性がフロートをクリアできない理由を分析する

#オーバーフロー属性がフロートのクリアに効果がない理由を簡単に分析するには、特定のコード例が必要です。

フローティング要素は、複数列のレイアウトとフローティングを実装するためによく使用されます。 Web ページのレイアウトやその他の効果の画像。ただし、親コンテナでフローティング要素が使用されている場合、親コンテナは高さを正しく計算できないことが多く、レイアウトの混乱を引き起こします。この問題を解決するには、通常、float をクリアするいくつかのテクニックを使用しますが、より一般的な方法は、overflow 属性を使用することです。

オーバーフロー属性は CSS で一般的に使用される属性で、コンテンツのオーバーフローを制御するために使用されます。オプションの値は 4 つあります。visible (デフォルト値、コンテンツはトリミングされず、親コンテナーからオーバーフローします)、hidden (コンテンツはトリミングされ、オーバーフロー部分は表示されません)、scroll (コンテンツはトリミングされ、親コンテナーからオーバーフローします)オーバーフロー部分はスクロール可能)、自動 (必要に応じてブラウザが自動的にスクロール バーを追加します)。

通常、親コンテナ内の子要素がフローティングに設定されている場合、フローティングの影響をクリアするために親コンテナにオーバーフロー属性を追加しようとします。例:

<style>
    .container {
        overflow: hidden;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

しかし、奇妙なことに、この一見実行可能に見える方法は場合によっては機能せず、親コンテナは依然として高さを正しく計算できません。この現象を説明するには、フローティング要素の親コンテナの高さの計算方法から理解する必要があります。

親コンテナは、自身の高さを計算するときに、浮動子要素の高さを無視します。浮動子要素が親コンテナより高い場合でも、親コンテナは子要素の高さが浮く前の高さと同じです。これにより、コンテナの高さが内部のフローティング要素に正しく適応せず、全体のレイアウトに影響を与えます。

オーバーフロー属性を使用してフロートをクリアしようとした方法に戻りますが、実際には、オーバーフロー属性はフロートのクリアに直接影響しません。実際には、親コンテナの新しい BFC (ブロック レベルの書式設定コンテキスト) が作成されます。BFC は独立したコンテナとして理解できます。コンテナ内の浮動要素は外部要素に影響しません。 BFC の作成方法やブラウザの実装が異なるため、オーバーフロー属性が無効になる可能性があります。

それでは、本当にオーバーフロー属性によるフローティング効果をクリアしたい場合は、どのように解決すればよいでしょうか?参考までに、一般的な解決策をいくつか示します。

clearfix テクニックを使用する
1. これは、空のブロックレベルの要素をフローティング要素の親コンテナに追加し、clear 属性を設定することによって、フローティングの効果をクリアする一般的な方法です。例は次のとおりです。
   

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="clearfix">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

フロートをクリアするには ::after 擬似要素を使用します
2. これはよりクリーンな解決策です。親で ::after 擬似要素を使用します。 float 要素のコンテナを作成し、clearfix スタイルを設定する例は次のとおりです。
   

<style>
    .container::after {
        content: "";
        display: table;
        clear: both;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

フレックスボックス レイアウトを使用する
3. フレックスボックスは、問題をより適切に解決できる新しいレイアウト方法です。浮き上がりが原因。例は次のとおりです。
   

<style>
    .container {
        display: flex;
    }
    .float-left {
        float: left;
        width: 50%;
    }
</style>

<div class="container">
    <div class="float-left">左侧内容</div>
    <div class="float-left">右侧内容</div>
</div>

要約すると、オーバーフロー属性はフロートのクリアに直接的な影響を与えませんが、BFC を作成することで間接的に達成されることに注意する必要があります。同時に、ブラウザごとに異なる方法で BFC が実装されるため、オーバーフロー属性が無効になる可能性があります。したがって、overflow 属性に加えて、clearfix 手法、::after 疑似要素を使用して float をクリアする、または flexbox レイアウトなどのメソッドを使用して float をクリアするなど、他の解決策を試すこともできます。

以上がオーバーフロー属性がフロートをクリアできない理由を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。