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的上面
