clear的一点思考

发表于   |   分类于 ，   |  

       之前一直说完BFC之后，这次也把clear清除浮动的原理总结一下。

clear清除浮动

顾名思义 clear就是清除的意思- -用法也很简单。
clear:left|right|none|both

1
2
3
4
5
6
7
none  :  默认值。允许两边都可以有浮动对象。

left   :  不允许左边有浮动对象。

right  :  不允许右边有浮动对象。

both  :  两边都不允许有浮动。

在平时写代码的时候 一般都是用给元素添加一个after伪类的方法，来给元素清除浮动.例如：

1
2
3
4
5
.clear fix{
content:"";
display:block;
clear:both;
}

clear用法注意：

clear,只能作用于块级元素，且只对自身元素有效并不会影响其他元素
举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.wrap{
		width:500px;
		height:400px;
		border:1px solid black;
		margin:100px auto;
		overflow:auto;//这里是使用BFC清除浮动的方法- -
	}
	.box1,.box2,.box3{
		float:left;
		width:100px;
		height:100px;
	}
	.box1{
		background:red;
	}
	.box2{
		background:yellow;
	}
	.box3{
		background:green;
	}
	</style>
</head>
<body>
<div class="wrap">
	<div class="box1"></div>
	<div class="box2">我想一个人静静</div>
	<div class="box3"></div>
	</div>
</body>
</html>

示意图

如果想使得box2 单独一列，三个元素仿佛没有浮动的样子。
示意图

这时候就要用到清除浮动的方法。其实bfc也是可以做到，不过今天用clear的来实现。
这里我第一时间想到的是给第二个div添加clear:both让他两边都不允许有浮动，来看看效果：
示例图

为什么会出现这样的情况呢？
去知乎查了查问答贴.在一个博主的博客中找到了答案：

clear只对自身元素有效，也就说说并不会影响到其他元素
这里给BOX2添加了一个clear:both,会使得两边元素不能有浮动，这时候前面是浮动的。就只能下来，但是这个属性只针对我本身，对其他元素并没有作用，后面元素收到flaot:left的影响还是会浮动上面。如果要做到上面的效果。还需要给box3再加一个clear:both;

我对于clear的理解

我感觉对于clear，其实换种方式理解会好一点，就是:clear只作用于本身，对其他元素没影响，其他元素该怎么样还是怎么样。(只改变自己，不改变其他元素)