主机格调

前几天一朋友在群里问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