css clear的使用

时间:2023-06-01 21:48:01

CSS中,clear属性用于控制紧邻浮动元素的元素的行为。它指定一个元素是否应该移动到在文档流中位于其前面的浮动元素下方。clear属性可以取以下值:

clear: none;(默认值):元素不会移动到任何浮动元素的下方。它保持在其正常位置上。
clear: left;:元素会被移动到任何前面的左浮动元素的下方。
clear: right;:元素会被移动到任何前面的右浮动元素的下方。
clear: both;:元素会被移动到任何前面的左浮动元素和右浮动元素的下方。
以下是clear属性的使用示例:

.float-left {
float: left;
}

.float-right {
float: right;
}

.clear {
clear: both;
}

在上面的示例中,具有float-left和float-right类的元素将被左浮动和右浮动。如果您想在这些浮动元素之后插入一个新元素,可以将clear类应用于它,如下所示:

<div class="float-left">左浮动元素</div>
<div class="float-right">右浮动元素</div>
<div class="clear">具有clear类的元素</div>

具有clear类的元素将被移动到浮动元素的下方,使其能够在文档流中出现在它们之后。

相关词 clear