首页  >  文章  >  web前端  >  CSS 中的clear 是如何工作的?

CSS 中的clear 是如何工作的?

WBOY
WBOY原创
2024-09-05 06:52:031110浏览

注意:我刚刚翻译了下面的文字并将其发布在这里。参考文献位于本文末尾。

CSS 属性clear 与CSS 属性float 相关。它定义一个元素是否应该移动到它之前的“浮动”元素下方。

让我们通过一个例子来理解这一点。

我们将考虑红、黄、蓝、绿四个方块,将它们依次添加,并且所有方块都放置在同一层。

Como funciona o clear em CSS?

然后我们会让每个元素一一向“左”“浮动”,这意味着它们将比初始位置移动一级。这将允许其他“非浮动”元素环绕浮动元素。

Como funciona o clear em CSS?

注意 - 下一个块将占据浮动块的位置,因此它是不可见的。当我们更改下一个块的尺寸时,我们观察到它被位于其上方一层的浮动块覆盖。

之后,我们将对蓝色块应用clear:left,这意味着没有元素会浮动到蓝色块的左侧。

Como funciona o clear em CSS?

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn