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中文网其他相关文章！