CSS 中的clear 是如何運作的？

注意：我剛剛翻譯了下面的文字並將其發佈在這裡。參考文獻在本文末。

CSS 屬性clear 與CSS 屬性float 相關。它定義一個元素是否應該移動到它之前的“浮動”元素下方。

讓我們透過一個例子來理解這一點。

我們將考慮紅、黃、藍、綠四個方塊，將它們依序添加，並且所有方塊都放置在同一層。

然後我們會讓每個元素一一向“左”“浮動”，這意味著它們將比初始位置移動一級。這將允許其他“非浮動”元素環繞浮動元素。

注意 - 下一個區塊將佔據浮動區塊的位置，因此它是不可見的。當我們更改下一個塊的尺寸時，我們觀察到它被位於其上方一層的浮動塊覆蓋。

之後，我們將對藍色塊應用clear:left，這意味著沒有元素會浮動到藍色塊的左側。

借助CSS屬性clear我們可以指定浮動元素的哪一側不能執行浮動。它定義或傳回相對於浮動物件的位置。

CSS 屬性中所接受的值clear

.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 屬性clear的工作原理，以便更好地理解。請分享您的範例並隨時添加到這篇文章中？ .

學習愉快！ ??‍?

來源

文章由Jasmin Virdi撰寫。

以上是CSS 中的clear 是如何運作的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！