关于clear属性的一些理解

简介：clear属性的真正用法。在看这篇文章前，需要先理解float的操作真相。

clear属性的作用

我们先来看一下W3C中是如何解释的：

但是很不幸的是，在实际的操作过程中，并不是这样运行的，比如：
我们设置第一个div左浮动，第二个div左浮动+『clear:both』，第三个div右浮动。这里我们发现，按理说，div2的两侧都不应该有浮动元素，可div3事实上，就出现在了div2的右侧。

设置的CSS代码如下：

.d1 {
	float: left;
}
.d2 {
	float: left;
	clear: both;
}
.d3 {
	float: right;
}

也就是说，其实我们的clear，真实的运行规则并不是这样。那么真相到底是怎样的？
经过一番探究，clear真正的作用应该是：清除前面的兄弟级元素对当前元素的影响。
也就是说，设置clear属性，并不会对后面的元素产生任何影响。
那么我们clear的left和right又是什么意思呢？
经过测验可得，clear:left的作用是：清除前面『左浮动元素』对当前元素的影响，而
clear:right自然是：清除前面『右浮动元素』对当前元素的影响。
至于clear:both，就是清除前面左或右浮动的元素对当前元素的影响，相当于同时设置了left和right。

具体的测试情况如下：

.d1 {
	float: right;
}
.d2 {
	float: left;
	clear: left;
}
.d3 {
	float: right;
}

此时的页面效果如图：

我们再把div2的left改成right

.d1 {
	float: right;
}
.d2 {
	float: left;
	clear: right;
}
.d3 {
	float: right;
}

可以看到效果如下图：

可以看到div2第一次设置为clear：left时，因为他前面的元素——div1，是右浮元素，所以并没有做出什么操作，而第二次设置成clear：right时，div2就主动下移，消除了div1对其的影响。
这个例子既佐证了前面left和right的结论，也证明了clear:right并没有清除右边的的浮动元素（div2的右侧依然存在div3）。而且，也可以注意到，clear属性只能用来移动自身来达到效果，不可以去强迫别人移动来达到效果，比如这里div2就是自己下移，而不是让div1走开。
同时，关于：
「clear真正的作用应该是：清除前面的兄弟级元素对当前元素的影响。」这句话
我们还要再解释一下『前面』这个词，他指的是在页面代码中，“前方的兄弟级元素”，而不是页面中显示的“前方的兄弟级元素”，举一个例子：
我们去执行如下代码：

.d1 {
	float: right;
}
.d2 {
	float: right;
	clear: right;
}
.d3 {
	float: right;
}

得到的页面如下：

可以看出，div2虽然设置了clear：right，但“前方的”div3依然和它肩并肩，这是因为在程序段中，div3并不是在div2的前面，而是在div2的后面。所以clear自然不会对div3起作用。而div2真正的前方——div1的影响确实是消除了——让div2另起一行。