一聚教程网:一个值得你收藏的教程网站

热门教程

css float父元素自适应高度无效解决办法

时间:2022-06-25 09:31:21 编辑:袖梨 来源:一聚教程网

当几个并列div元素使用float属性时,由于父容器没有定义实际高度(height),在IE中显示出现问题,无法显示父容器的背景颜色或背景图片

做了如下设置实验情况:
1、
不正常显示的设置
子容器:使用float
父容器:不定义height
2、
在测试中发现,父容器在不定义高度时,取消float属性,背景颜色显示正常

子容器:不使用float
父容器:不定义height
3、
而给父容器定义了高度后,子容器再使用float则一切正常

子容器:使用float
父容器:定义height

原因及解决方法

如果您没有闭合(清除)浮动元素,它将造成的后果是-----div的高度不能自动增加。
外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见。见W3C的解释

解决方法:

给父元素设置高度
让父元素也浮动

在子级DIV后面加上

,即清除浮动。可以用,但增加了多余的垃圾代码。

 代码如下 复制代码



              
Some
Content

               style="clear:both">

      

 

注意,多了一段清理浮动的代码。这是一种好的CSS代码习惯,但是这种方法增加了无用的元素。

4.设置父元素overflow为hidden或者auto(视情况选择使用),这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素,不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的.

 代码如下 复制代码

    test

下面来看个例子

我们写一个实例,让我们更直观地看这个问题是怎么产生的,首先写下以下HTML代码:
  

 代码如下 复制代码
  
      
      
    
    
    CSS代码如下:
    #top{
      background: blue; 
      width: 800px; 
    }
    #left{
      float: left; 
      width: 400px; 
      height: 50px; 
      background: red; 
    }
    #right{
      float: right; 
      width: 400px; 
      height: 60px; 
    }

    可以看到,这里有一个宽度为800像素,背景色为蓝色的顶级元素,它有两个子元素,分别漂浮在左右两边,子元素的高左边的为50像素,右边的为60像素,为了方便查看,这里把左边的子元素背景色设置为红色。
    使用火狐或其他现代浏览器打开这个网页,效果如图:

css float父元素自适应高度无效解决办法


    只有左浮的子元素可见,父元素不见了,因为它的子元素都浮动的,不会对父元素产生任何影响,而它内部除了两个浮动的子元素以外什么都没有,因此高度默认为0。现在尝试使用IE8以下版本打开这个网页(IE8已经修正这个问题),效果如图:

css float父元素自适应高度无效解决办法


    父元素被子元素撑大了,高度为60px。当初困扰我非常久的,就是我想要IE中的那个效果,可是W3C为float的定义让父元素大小不会受到任何影响,那怎么办?其中一个解决方案就是父元素使用固定的高度,如果子元素的大小不确定,怎么办呢?当初做这个的时候上网查了一下资料,在父元素的CSS中加入两句代码:
    
    zoom: 1; 
    overflow:hidden; 
    
    那么火狐中就可以根据子元素的大小自动适应了。

热门栏目