关于清除浮动的理解clear:both,clear:left,c
2018-12-11 本文已影响0人
harryfun
1. clear
图像的左侧和右侧均不允许出现浮动元素
clear 属性规定元素的哪一侧不允许其他浮动元素。
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
- 上面这个是w3school对clear这一个属性的说明。
- 但是我觉得有很大的歧异，下面我用案例来深入理解一下clear这个属性。
2. clear:left 的元素左侧不允许有浮动
<!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>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #66ccff;
float: left;
}
.box1 {
background-color: #66ccff;
}
.box2 {
background-color: #0a0;
}
.box3 {
background-color: #f00;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果图：
image
那么现在
我们有三个左浮动的盒子，如果想让第二个盒子在新的一排显示，那么就要用到我们的
clear: left 不允许该元素左侧有任何的浮动只需要在.box2上加上clear:left便可以实现效果
<!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>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #66ccff;
float: left;
}
.box1 {
background-color: #66ccff;
}
.box2 {
background-color: #0a0;
clear: left;
}
.box3 {
background-color: #f00;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
效果图：
image
那么，我们想要让第二个绿色的盒子的左右两侧都不允许有浮动元素，也就是让三个盒子类似于标准流的显示方式，我们使用clear:both就可以了么？
假想图：
image
3. clear: both 无法清除当前元素右侧的浮动对象
clear无论在何种情况下（clear:left,clear:right,clear:both）都只能让作用了clear属性的标签的前面的标签起到效果。
非常疑惑，那岂不是只能清除掉左侧的浮动对象咯，clear:both和clear:right有什么用咯？
我们还是拿刚才的案例，不过不同的是，我们让所有的div右浮动
效果图：
image
现在！！！！！！！！！！
我们让第二个盒子的右侧不允许有浮动的元素出现，我们就要用到
clear:right或者clear:both了
image
<!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>Document</title>
<style>
.box {
width: 400px;
height: 300px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
float: right;
font-size: 50px;
line-height: 100px;
text-align: center;
color: aliceblue;
border: 1px solid #000;
}
.box1 {
background-color: #66ccff;
}
.box2 {
background-color: #0a0;
clear: both;
/*或者 clear:right*/
}
.box3 {
background-color: #f00;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
4. 总结
-
无论是both，还是left，还是right。clear始终无法处理他后面的元素，你要问为啥不行啊 ，我就要清掉，那我想和你说，你左右都清掉何必还用浮动哇。。。。
顺便吐槽一下w3school的苹果
image
让我想到了
image
所以干嘛要在物品上画笑脸啊 ，怪吓人的！
