注意：我刚刚翻译了下面的文字并将其发布在这里。参考文献位于本文末尾。
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中文网其他相关文章！
