§ ITPOW >> 文档 >> CSS

作者：vkvi 来源：ITPOW（原创） 日期：2013-7-26

CSS 中，稍微有点经验的人都知道 overflow 是解决 CSS 中高度为零、内部元素浮动影响外层、第一个 margin 伸出外部元素等问题的。

在 IE 中 zoom，也是和 overflow 一样的道理，平时我们都要指定它，只不过由于有些情况下指定了宽度、高度就可以不用指定 zoom，所以我们常常忽略指定 zoom。其实，为了统一，建议都指定 overflow 和 zoom。

一、解决无高度问题，也就是大家常说的边框、背景问题。

如下代码，由于内部 div 有 float:left;，边框是没有围绕文字的，只是两根细线，背景也是没有的。

<div style="border:1px solid red; background:yellow;"> <div style="float:left;">ITPOW CSS 教程，这个不是你想要的效果。</div> </div>

解决办法，加上 overflow、zoom。

<div style="overflow:hidden; zoom:1; border:1px solid red; background:yellow;"> <div style="float:left;">ITPOW CSS 教程，overflow 和 zoom 一起解决高度问题（即：边框、背景问题）。</div> </div>

二、内层浮动影响外层的问题

<div style="border:1px solid red; background:yellow;"> <div style="float:left;">我和下面的那段代码在一行</div> </div> <div style="border:1px solid red; background:yellow;"> <div style="float:left;">我和上面的那段代码在一行</div> </div>

由于内部 div 有 float:left，竟然导致后面跟着的代码也受影响。本来希望占两行的，现在都跑到同一行去了。

解决办法，加上 overflow、zoom。

<div style="overflow:hidden; zoom:1; border:1px solid red; background:yellow;"> <div style="float:left;">ITPOW CSS 教程，overflow 和 zoom 一起解决内部浮动影响外层问题。</div> </div>

三、第一个内层 div 的 margin 跑到外面去了

这个问题在奇妙的第一个元素的 margin-top 一文中已经讲解。