打标签 ‘ 子容器 ’
首先看一段代码 <div id=”parentDiv”> <div id=”subLeft” style=”float:left;width:100px”></div> <div id=”subRight” style=”float:right;width:100px”></div> </div> <div id=”otherDiv”></div> 在这段代码中父容器parentDiv中如果不设定任何高度值，那么otherDiv就不会接着subleft和subRight顺序排下来，因为subLeft和subRight是float对象，不占据任何空间，这样就可能引起一些问题。 对于此，有两种解决办法： 1.给parentDiv设定一个适当的高度值Height 很简单，把height值写在parentDiv的style中。 但是，如果父容器本身是一个class，需要多次应用。那么这个高度就不能确定，不能统一一个数值。 2.overflow:auto;zoom:1 可以让父容器，自适应内部容器的高度。 在父容器的style中加入overflow:auto;zoom:1 则可以让父容器自适应内部容器的高度。 但是overflow:auto;zoom:1并不能通过W3C标准，zoom:1;是为了兼容IE6而使用的CSS HACK，可以用<!–[if IE]>这样的方式来写CSS的这个属性 。 如果父容器只被使用一次，可以设定固定高度。请使用高度值控制，不要使用overflow。因为overflow:auto;zoom:1并不能通过W3C标准zoom:1;是为了兼容IE6而使用的CSS HACK 以下再记录一种具体情况的解决方法 父容器（parentDiv）本身没有背景图，其内部容器（左subLeft和右subRight）都是纯文字或者纯图片内容的浮动对象。parentDiv下面与之同样级别的otherDiv的css有一个背景图 如果subLeft和subRight以及parentDiv不加高度控制的话（这里其实只要parentDiv加高度就可以了，但是此高度一定要高于subLeft和subRight的实际高度），那么下面的otherDiv的背景图将不会从otherDiv的(0,0)坐标开始展开，而是会从上面的parentDiv开始，因为parentDiv没有高度控制，而其内部的仅仅是浮动对象，不占据空间，所以otherDiv实际上就是从靠近parentDiv的(0,0)开始的，所以其背景也是靠近parentDiv的（0,0）开始铺开（这里，如果parentDiv的高度设定了10px,那么otherDiv就从(0,10px）开始铺开，)，但由于浮动对象存在，所以otherDiv内部的文字图片还是会从被浮动对象占据了的空间的下面开始展示。因为不会出现文字重叠。 这种情况，可以 设定parentDiv和subLeft、subRight的高度。 给parentDiv一个overflow:auto;zoom:1的css特性，让其自适应内部浮动容器的高度。 在parentDiv之内 otherDiv之后加<br />的清除浮动，这样，也可以让otherDiv的背景从被浮动容器占据的空间之下开始排列（ 父容器如果本身有背景图，那么类似上面这种情况，其内部又有两个浮动对象的话，在otherDiv后面的加<br />清除浮动就无效了。必须使用parentDiv加高度或者加overflow:auto;zoom:1来解决此问题。） [ 阅读全文]