元素的clear属性:
box1向左浮动,脱离文档流(不再占用位置),box2将自动向上移动,位置发生了改变
如果不想让下边的元素的位置发生改变
为了解决这个问题:可以设置元素的clear属性:
清除浮动元素对当前元素的位置的影响
clear:
作用:清除浮动元素对当前元素的影响
可选值；
left:清除左侧浮动元素对当前元素的影响
right:清除右侧浮动元素对当前元素的影响
both:清除左/右两侧浮动元素对当前元素的影响
原理:设置了clear属性后,浏览器会自动为当前元素(块元素)添加上外边距
以使当前元素不再发生移动
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>clear属性</title>
<style>
.box1{
width:200px;
height:200px;
background-color: cadetblue;
/* 设置向左浮动*/
float: left;
}
.box2{
width:400px;
height:400px;
background-color:crimson;
float: right;
}
.box3{
width:200px;
height:200px;
background-color:chartreuse;
/*设置clear属性:使其位置不受左侧浮动元素的影响 */
/* clear: left; */
/*设置clear属性:使其位置不受右侧浮动元素的影响 */
/* clear: right; */
/* clear: both; */
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
版权声明：本文为qq_34550459原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。