注意：我剛剛翻譯了下面的文字並將其發佈在這裡。參考文獻在本文末。
CSS 屬性clear 與CSS 屬性float 相關。它定義一個元素是否應該移動到它之前的“浮動”元素下方。
讓我們透過一個例子來理解這一點。
我們將考慮紅、黃、藍、綠四個方塊，將它們依序添加，並且所有方塊都放置在同一層。
然後我們會讓每個元素一一向“左”“浮動”，這意味著它們將比初始位置移動一級。這將允許其他“非浮動”元素環繞浮動元素。
注意 - 下一個區塊將佔據浮動區塊的位置，因此它是不可見的。當我們更改下一個塊的尺寸時，我們觀察到它被位於其上方一層的浮動塊覆蓋。
之後，我們將對藍色塊應用clear:left，這意味著沒有元素會浮動到藍色塊的左側。
借助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中文網其他相關文章！
