CSS中clear介绍

原文地址：http://ons.me/434.html

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的容器，只能清除自身之前的容器浮动，并且清除浮动方向对应。