本文主要是介绍CSS中clear介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文地址：http://ons.me/434.html
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的容器，只能清除自身之前的容器浮动，并且清除浮动方向对应。
这篇关于CSS中clear介绍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
