clear属性怎么回事啊
发布网友
发布时间：2022-04-06 13:06
共3个回答
懂视网
时间：2022-04-06 17:27
CSS clear属性
作用：clear属性可以设置浮动元素左右两侧的元素不浮动。
语法：
clear：none | left | right | both;
none： 默认值。允许浮动元素出现在两侧。
left：在左侧不允许元素浮动。
right：在右侧不允许元素浮动。
both：在左右两侧均不允许元素浮动。
CSS clear属性的使用示例
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>
<h2>不使用clear清除浮动</h2>
<div class="div1">div1</div>
<div class="div2">div2 - 测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>
<p>注意，在HTML代码中，div2在div1之后。但是，由于div1向左浮动，所以div2中的文本围绕div1流动。</p>
<br><br>
<h2>使用clear清除浮动</h2>
<div class="div3">div3</div>
<div class="div4">div4 - 测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！ </div>
<p>
说明：使用clear: left;将div4向下移动到浮动div3下面；值“Left”清除浮动到左侧的元素。我们还可以使用clear属性的“right”和“both”值。</p>
</body>
</html>效果图：
热心网友
时间：2022-04-06 14:35
如果想要在同一行 a b 都要用float，并且b不能用clear。
下边这个代码是我亲自手打并测试后的效果。
<html>
<head>
<style type="text/css">
.use_float{float:left;}
.float1{height:100px;width:100px; background:pink;}
.float2{height:150px;width:150px; background:blue;}
.float3{height:200px;width:200px; background:green;}
.float4{height:250px;width:250px; background:black;}
.float5{height:300px;width:300px; background:orange;}
.float6{height:350px;width:100px; background:#aeaeae;
float:right;}
.use_clear{ clear:left; /*-----把这里的left换成right试试-----*/ height:10px; width:100%; border:1px solid red; background:red;}
</style>
</head>
<body>
<div class="use_float float1"></div>
<div class="use_float float2"></div>
<div class="use_float float3"></div>
<div class="use_float float4"></div>
<div class="use_float float5"></div>
<div class="use_float float6"></div>
<!---------------------------------上边用float---------------------------->
<div class="use_clear"></div>
</body>
</html>
参考资料：个人经验
热心网友
时间：2022-04-06 15:53
