CSS中clear“清除浮动”的作用原理
之前看视频中，总听到说clear不是清除浮动，而是消除浮动带来的影响，纠结了一天，没有理解，现在终于能明白这是什么意思了。
下面直接用代码和运行结果说明
HTML代码和CSS代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<link href="float.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="clear">clear</div>
</div>
<div class="box3">3</div>
</body>
</html>
.box1{
width: 200px;
height: 300px;
background-color: chocolate;
/*float: left;*/
/*margin: 20px;*/
}
.box2{
width: 200px;
height: 200px;
background-color: cornflowerblue;
float: left;
}
.clear{
/*float: left;*/
/*clear: left;*/
width: 200px;
height: 300px;
background-color: darkseagreen;
float: right;
/*clear:left;*/
}
.box3{
height: 200px;
background-color: cyan;
}
以上代码的运行结果如图1：
运行结果说明：
- 由于2（蓝色）设置了向左浮动：float:left,会“脱标”，在文档流中不再占有位置；
- 3（青色）会忽视2而直接紧跟着1；
- clear（绿色）设置了向右浮动：float:right；
- 如果2没有设置向左浮动，则3会紧跟着2下面往下排列，而clear由于设置了向右浮动，和3的相对位置仍然如图，即会随着3一起往下移动一个2的高度，代码（html和之前是一样的，不再展示）和效果如下：
.box1{
width: 200px;
height: 300px;
background-color: chocolate;
/*float: left;*/
/*margin: 20px;*/
}
.box2{
width: 200px;
height: 200px;
background-color: cornflowerblue;
/*!*float: left;*!取消2的向左浮动*/
}
.clear{
/*float: left;*/
/*clear: left;*/
width: 200px;
height: 300px;
background-color: darkseagreen;
float: right;
/*clear:left;*/
}
.box3{
height: 200px;
background-color: cyan;
}
效果如图2（绿色还有一部分高度没有展示出来）
由于2设置浮动，则对3和clear产生了影响，使得他们的位置如图1所示，而不是如图2，现在如果想消除这种浮动对cleard的影响，则在clear中添加clear:left或者clear:both即可，因为2中设置的是左浮动，故消除这种浮动是clear:left或者clear:both（包含了left）即消除2的左浮动对clear的影响，代码和效果如下：
.box1{
width: 200px;
height: 300px;
background-color: chocolate;
/*float: left;*/
/*margin: 20px;*/
}
.box2{
width: 200px;
height: 200px;
background-color: cornflowerblue;
float: left;
}
.clear{
/*float: left;*/
/*clear: left;*/
width: 200px;
height: 300px;
background-color: darkseagreen;
float: right;
clear:left;/*清除左浮动*/
}
.box3{
height: 200px;
background-color: cyan;
}
效果如下图3
clear跑到了2的下面，如图2中的位置一样，好像2没有设置浮动一样，但是由于2的浮动对3的影响并没有消除，故3的位置仍如图1所示，2是浮在3的上面
版权声明：本文为weixin_45997184原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。