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

CSS中clear“清除浮动”的作用原理相关推荐

CSS中关于清除浮动的问题
1.采用:after的方法清除浮动优点:避免在html里插入多余的标签详情:http://www.positioniseverything.net/easyclearing.html 整理成一个通 ...
CSS基础之清除浮动
CSS基础之清除浮动本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的.本文是在我参考了许多前辈经验的基础上编写的,如有错误的地方,请各位大牛不吝 ...
在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement).使用clear属性可以让元素边上不出现其它浮动元 ...
html clear的作用,css中clear的作用是什么？
当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用 ...
css中clear:both属性的理解及用法
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动 ...
css为何要清除浮动及清除浮动的方法
一:css为何要清除浮动 1.很多情况下,如果我们使用了float特效,出现margin,padding设置不能正确显示,浮动会导致父级子级之间设置了padding,导致了属性不能正常传达,导致mar ...
CSS中div的浮动float
------------------------------CSS中div的浮动float----------------------------------- HTML页面的标准文档流(默认布局)是 ...
关于css中clear:both清除浮动防止父级元素高度坍塌的原理
不少小伙伴在防止高度坍塌时都会在浮动元素后面写入一个div,再在里面写入clear:both属性来清除浮动.那么今天就在此探究一下clear:both的工作原理. 先说一下clear:both的作用 ...
在html中清除浮动的代码,css 两种清除浮动经典实例代码
一.使用空标签清除浮动 *{margin:0;padding:0;} body{font:36px bold; color:#f00; text-align:center;} #layout{back ...

CSS中clear“清除浮动”的作用原理

CSS中clear“清除浮动”的作用原理

CSS中clear“清除浮动”的作用原理相关推荐

最新文章

热门文章