CSS でのクリアはどのように機能しますか?

注: 以下のテキストを翻訳してここに投稿しました。参考文献はこの記事の最後にあります。

CSS プロパティの Clear は、CSS プロパティの float に対して機能します。要素をその前にある「浮動」要素の下に移動するかどうかを定義します。

例を使ってこれを理解しましょう。

赤、黄、青、緑の 4 つのブロックが次々に追加され、すべてが同じレベルに配置されると考えます。

次に、各要素を 1 つずつ「左」に「フロート」させます。これは、要素が初期位置の 1 レベル上に移動されることを意味します。これにより、他の「非浮動」要素が浮動要素の周囲を囲むことが可能になります。

注 - 次のブロックはフローティング ブロックの位置を占めるため、表示されません。次のブロックの寸法を変更すると、そのブロックが 1 層上に存在するフローティング ブロックで覆われていることがわかります。

その後、青いブロックにclear:leftを適用します。これは、どの要素も青いブロックの左側にフローティングされないことを意味します。

CSS プロパティの Clear を使用すると、フローティング要素のどちら側がフローティングを実行できないかを指定できます。浮遊オブジェクトに対する位置を定義または返します。

CSSプロパティで受け入れられる値をクリア

.element {
    clear: none;
    clear: left;
    clear: right;
    clear: both;
    clear: inline-start;
    clear: inline-end;

    clear: inherit;
    clear: initial;
    clear: revert;
    clear: revert-layer;
    clear: unset;
}

以下は、上記の例のコードです。

HTML:

<div class="wrapper">
    <div class="red block"></div>
    <div class="yellow block"></div>
    <div class="blue block"></div>
    <div class="green block"></div>
</div>

CSS:

.wrapper{
    height:100vh;
    padding: 30px;
    text:center;
    background: #3A3B3C;
}
.block {
    height:40px;
    width:40px;
    border-radius: 4px;
}
.red {
    background: #CB6D51;
    float:left;
}
.yellow {
    background:#FBE7A1;
    float: left;
}
.blue {
    background: #3090C7;
    float: left;
    clear:both;
}
.green {
    background: #2E8B57;
    float: left;
}

理解を深めるために、基本的な例を使用して CSS プロパティのクリアがどのように機能するかを説明しようとしました。あなたの例を共有し、この投稿に自由に追加してください。

楽しく学習してください??‍?

ソース

Jasmin Virdi によって書かれた記事。

以上がCSS でのクリアはどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。