详解CSS中clear属性both、left、right值的含义
前几天一朋友在群里问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的容器，只能清除自身之前的容器浮动，并且清除浮动方向对应。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
