前几天一朋友在群里问clear:left的意思，我以为是简单的清除浮动问题，就让他百度“清除浮动”，导致中间有点小误会。后来我按照他写的DEMO，发现我自己也没完全理解clear:left和clear:right的意思。特别看了下手册，和写了几个DEMO，经过群里其他人指导，总结如下，希望对其他人能有点帮助。
clear的值有四个
- none：允许两边都可以有浮动对象；
- both：不允许有浮动对象；
- left：不允许左边有浮动对象；
- 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的容器，只能清除自身之前的容器浮动，并且清除浮动方向对应。
好东西啊，不过浮动不是float属性吗？
哦，clear是清除浮动
左旋浮那个意思
这个很实用，除了浮动，那样式也是经典的。 😆
现在的博客越来越静了。。
为了弄懂这个，我还走了不少弯路……
了解css各种属性最好的方法是测试，反复的测试，给div区块加上边框或者背景色，这样就能通过测试看到效果了。
我也专门测试了下，clear:left就是清除当前元素前面左侧浮动的，即便用right也是没用的。同理，如果元素前面有右浮动，那就clear:right清除当前元素前面右浮动，即便使用left是没有的！
呵呵。膜拜前端攻城师
思维很混乱啊，没搞明白你想表达什么意思。我也分析了分析，看这里http://user.qzone.qq.com/1058640280/infocenter#!app=2&via=QZ.HashRefresh&pos=1368285125
这是什么？没权限看这链接
清除浮动是个大学问，之前hash让我折腾的够呛
你这个广告严重的越位了。。
我一直喜欢加空容器，因为其他清除浮动都没遇见过，就是想下面的元素不要因为上面的元素浮动而插进了上面的元素的缝隙里面，就用一个空容器挡住就行了
经常使用，比较熟悉
要真纠结起来，我也不知道是什么意思，不过用的很少。
为了搞懂这个，还是废了不少功夫滴！
多用用就会了
❓ 今天为了搞一个页面居中的CSS，折腾了半天。程序猿上辈子都是折翼的天使啊。