CSS でフロートをクリアする原理の紹介-CSSチュートリアル-php.cn

CSS でフロートをクリアする原理の紹介

王林

リリース： 2020-07-18 17:31:11

転載

2529 人が閲覧しました

CSS でフロートをクリアする原理の紹介

まず第一に、clear:both が float をクリアするための鍵であることを知っておく必要があります。

(推奨チュートリアル: css クイックスタート )

clear は、要素のどの側が他のフローティング要素を許可しないかを指定する CSS の位置決め属性です。次に、clear:both は、左側と右側で浮動要素を許可しないことを規定します。

clear 属性はブロックレベルの要素でのみ機能します。これは、フローティングスタイルをクリアする際の display:block の役割です。

さらに、visibility: hidden;height: 0;content の値が空であれば、書き込まれているかどうかは関係ありません。

それでは、なぜフロートをクリアしたいのでしょうか? 最も一般的な理由は、外側のコンテナが高度に折りたたまれているためです。コードのデモ:

<style>
.wrap {
    width: 200px;
    border: 1px solid #333;
}
.wrap:after {
    content: &#39;&#39;;
    display: block;
    clear: both;
}
.left {
    float: left;
    background: blue;
    height: 100px;
    width: 100px;
}
.right {
    float: left;
    background: red;
    height: 50px;
    width: 100px;
}
</style>
<body>
    <div class=&#39;wrap&#39;>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

ログイン後にコピー

それを明確に示すために、.wrap 内のコンテンツ次の図に示すように、:after スタイルは content : 'after pseudo-element' に設定されます。

CSS でフロートをクリアする原理の紹介