关于overflow:hidden和zoom:1清除浮动的认识

    一直以来浮动就是做css里面很让人蛋疼的问题,所以,我一直是很小心的使用着它,生怕这货会给我惹出点儿事端来。。。

    而经过一段时间的使用,也发现了一些比较好的驾驭浮动的方法,最常见的便是clear:both。。。这个就不多说了,一般人都懂得。

    最近才得知overflow和zoom能清除浮动,所以果断的使用了一下,发现效果真是刚刚的~  所以也喜欢上了用这两个属性来清除浮动,但是一直对它们清除浮动的原理很不解,所以就狠狠的百度了一个小时,直到看到某位大神提出的“包裹”这个思想,让我觉得一下子明朗了不少,所以来和大家分享一下。。。。(= =! 今天的开场白貌似有点长。。。。)

    首先先说overflow吧,overflow:hidden有一个大家都知道的作用就是溢出隐藏,也就是在父元素设置了宽和高以后,子元素的内容如果有溢出的话,就隐藏溢出部分,不予显示(额,由于今天比较晚了,我就不写demo了,纯口述。。。)

    那么,如果父元素设置了overflow:hidden属性后,又不给它设置宽和高的话,会怎么样呢? 首先我们来想一下,如果父元素没有设置宽和高,而子元素没有float属性的话,那么很简单,父元素会被子元素撑开。那要是子元素是float属性呢?按理来说,父元素会瘪成0高0宽,因为我前面有篇日志说过,float是脱离了原来的层而单独浮在上面的。但是我们想一下,子元素浮在外面,父元素又没有体积,按照overflow:hidden来说,也就是说子元素全部溢出,也就是全部隐藏。。。。  这怎么想怎么觉的不太合情理,所以这里的父元素就需要去包裹住这个浮动的子元素,也就出现了我们所看到了清除浮动的效果。。。

    至于zoom:1呢,这真是一个特别神奇的属性,简直就是IE下的神器~(预知详情,以后有时间我再写吧,这次主要写它的清除浮动的作用。。。。 =。=)  这个属性最开始是用于缩放的,后面跟的参数就是缩放比例。那么让我们再回到上面所说的情景:父元素设置了zoom,无高无宽,而子元素又是float,那么父元素又是一个零体积,这时候要进行缩放的话,因为零怎么按比例缩放都是零,所以,父元素也只能去包裹它的子元素,然后才能进行缩放。。。

    然后是兼容性,zoom属性大家都是到,是只有IE下有效的,而overflow呢,在IE6下的时候,微软对overflow的理解有误,所以没有清除浮动的作用,从IE7开始修就正好了。。。。还有一点就是,overflow做清除浮动的时候,貌似会有占tab键的情况发生,所以还是按情况使用。。。。

    嗯嗯,大概就是这么的,以上纯属小菜个人理解,有不对的地方还请大牛们多多指正~

    

    PS:不早了,敲完收工回宿舍喽~

    

标签: 清除浮动

添加新评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif