详解CSS中clear属性both、left、right值的含义

前几天一朋友在群里问clear:left的意思，我以为是简单的清除浮动问题，就让他百度“清除浮动”，导致中间有点小误会。后来我按照他写的DEMO，发现我自己也没完全理解clear:left和clear:right的意思。特别看了下手册，和写了几个DEMO，经过群里其他人指导，总结如下，希望对其他人能有点帮助。

clear的值有四个

1. none：允许两边都可以有浮动对象；
2. both：不允许有浮动对象；
3. left：不允许左边有浮动对象；
4. right：不允许右边有浮动对象。

老实说，我没真正理解字面上的意思，因为这几段话是有歧义的，例如clear:right的解释是“不允许右边有浮动对象”，我一直以为是清除自身右方（下方）容器的浮动。但其实不是。下面一个一个DEMO的看，希望你能懂left和right到底是清除哪里的浮动。

一、普通浮动，无清除浮动，外容器塌陷：DEMO

二、左浮动，clear:both清除浮动：DEMO

三、右浮动，clear:both清除浮动：DEMO

四、左右浮动，clear:both清除浮动：DEMO

五、左浮动，清除左浮动，左浮动，未清除浮动的塌陷：DEMO

六、右浮动，清除右浮动，左浮动，未清除浮动的塌陷：DEMO

（浮动外层容器加了背景色，如果此元素没有浮动，背景色即会包住他，反之则包不住）

很多人清除浮动喜欢在浮动容器后面加一个空div，div加clear:both，即第二、三、四（因为我加了宽高，一般清除浮动的div都是0，所以看不见），我个人不是很喜欢这种。重点看第五和六，clear什么，就清除自身前面容器对应的浮动。例如五红色是左浮动，那么黄色clear:left就是清除自身前面红色的左浮动，而清除不了后面蓝色的左浮动。六里红色是右浮动，那么黄色clear:right就是清除自身前面红色的右浮动。至于二、三、四里的clear:both，左右浮动都可以清除。

总结：加clear的容器，只能清除自身之前的容器浮动，并且清除浮动方向对应。

<参考：http://ons.me/434.html>