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