CSS オーバーフロー属性を使用して float が div を開けないようにする方法の詳細な説明-CSSチュートリアル-php.cn

CSS オーバーフロー属性を使用して float が div を開けないようにする方法の詳細な説明

高洛峰

リリース： 2017-03-08 13:10:46

オリジナル

1995 人が閲覧しました

float を使用して浮動要素を設定すると、p が引き伸ばされる状況がよく発生します。解決策の 1 つは、overflow: hidden を使用して、float が p を引き伸ばさないようにする方法を見ていきます。方法:

フロントエンドエンジニアに応募する人の多くは、面接でこのような質問をされるでしょう。
例: p 要素内の 2 つのサブ要素 p は両方とも float:left で、外側の p には高さがありません。このときどうすればよいでしょうか。
通常の解決策は、レイアウトフロー内の要素に after 疑似要素を追加し、表示: ブロックとクリア: 両方に設定することです。

p:after {content: "";display: block;clear: both;}

ログイン後にコピー

しかし、今日偶然、overflow: hidden; も p を開くことができることを発見しました。以下の通りです:
より多くの知識が得られました。

<body>
  <p>
    <p>I am floated</p>
    <p>So am I</p></p><style>p {   
    overflow: hidden;}p {   
    float: left;}</style>

ログイン後にコピー

さらに深く
さらに深めて、次の例を見てみましょう:
次のコードを記述し、効果を確認します
html コード:

<p class="content">
    <p class="p1">

    </p>
</p>

ログイン後にコピー

CSS コード:

.content {   
    border: 1px solid red;   
}   
.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
}

ログイン後にコピー

効果は次のとおりです。
CSS オーバーフロー属性を使用して float が div を開けないようにする方法の詳細な説明

content に p1 を追加し、content タグの境界線と p1 タグのサイズと色を設定します。 content タグが p1 タグをラップしていることがわかります。そして、コンテンツタグのサイズもサポートしています

しかし、p1の属性を右にフローティングに設定すると

.p1 {   
    width: 100px;   
    height: 100px;   
    background-color: cyan;   
    float: rightright;   
}

ログイン後にコピー

次のようになります:
CSS オーバーフロー属性を使用して float が div を開けないようにする方法の詳細な説明

p1タグは確かに右揃えです。ただし、コンテンツタグの高さはサポートされていません。
心配しないでください。コンテンツタグにオーバーフロー属性を追加する属性を設定する必要があります

属性を追加します(overflow: hidden;)

.content {   
    border: 1px solid red;   
    overflow: hidden;   
}

ログイン後にコピー

追加後の効果は次のようになります
CSS オーバーフロー属性を使用して float が div を開けないようにする方法の詳細な説明

以上がCSS オーバーフロー属性を使用して float が div を開けないようにする方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。