DIV+CSS处理DIV设置float后,父容器无法定位高度的问题解决

DIV + CSS布局的方法现在很流行,但我们在使用CSS定位DIV的时候,如果给div设置了float值之后,我们将发现,父容器的高度塌陷了,根本就获取不到子容器的高度。这就意味着如果浮动的div只是布局中的一小块区域,并且内容可能超过容器的时候,我们的父容器不会检测到,并扩充区域大小以适应内容。页面将在这种情况下错乱不堪。

为了解决这种问题,我们经常做的可能就是法器:overflow:hidden;width:xxpx;height:xxpx;来解决。超出内容,自求多福吧,反正我是不然你出来搅乱布局。可是,仅仅这样,我们还是不能解决所有问题,如果确实需要自适应的时候,怎么办? —— 只能Table了吗?

答案自然是否定的,在div+Css盛行的当下,无数牛人已经为此找到了多种的解决方法,下面就逐一介绍:

1. 最简单,最有效的方法,给HTML代码加点料:

就是在父容器的添加一个子容器,该子容器位于父容器中子容器列表的最后。并且给该子容器添加一个样式:clear:both;。就这么简单,你就可以让你的父容器自适应浮动子容器的高度了。

原始HTML:

<div id="header">

这里是头部内容

</div>

<div id="container">

<div id="sub_container" style="float:left">

... 这里是内容,很长很长的内容...

</div>

</div>

<div id="footer">

尾部内容

</div>

上面的代码可以测试下,页面是不是错乱不堪?那试试下面的代码呢?

<div id="header">

这里是头部内容

</div>

<div id="container">

<div id="sub_container" style="float:left">

... 这里是内容,很长很长的内容...

</div>

<div style="clear:both;"></div>

</div>

<div id="footer">

尾部内容

</div>

是不是解决了问题呢?

这种方法是W3C推荐使用的解决浮动带来父容器高度塌陷的问题的方法。当然,代码中的div你也是可以替换成其他的标签的,比如:<br>。<br>本身是换行,在这里,它更符合HTML中的语义。

这种方法自然也是有他的缺陷的,就是你要在需要的时候,加上那么一点点代码。在有的时候,你可能更希望保留HTML代码的原始内容。即然这样,我们就试试其他方法吧。

2. 使用after伪类:

这种方法需要你了解伪类这个玩意儿,不清楚?那Sorry,自学下吧,实在不想学,Copy之~。方法的本质和第一种差不多,就是用伪类来给父容器添加一点内容并设置clear:both;代码如下:

#container:after{

content:"&nbsp;",

height:0;

clear:both;

visibility:hidden;

display:block;

}

这里用content设置内容为空格,当然,你也可以设置一个小点(.),只要不是很明显,就可以。这样就不用修改HTML代码,达到了一样的效果,哦不,是类似的效果。毕竟还是有不同的,这个方法在浏览器的兼容方面表现比较一般,如果你决定用,可能需要对浏览器进行必要的hack.

这个还是麻烦,那能不能不要弄这么麻烦的呢?自然也是有的,那我们看看下面这个方法会不会简单些。

3. 父容器CSS添加overflow特性:

这个方法简单,就是在父容器的css定义中添加overflow:hidden或者overflow:auto就可以解决问题了,简单吗?当然,不过你还需要做些擦屁股的工作,由于overflow会影响页面内容的现实方式,可能会导致页面的显示会有那么一些些问题,而且遗憾的是这种显示问题与浏览器本身有关,因此,你需要多多调试,以策万全。

#container{overflow:auto;zoom:1;}

这里需要注意的是zoom:1;,加这个的意图是为了兼容我们神一样的IE6(纠结啊,国内IE6到现在都还有23%左右的份额)。网上有一说是这个zoom:1;可以用height:1%;代替,没有尝试过,有机会你试试,反正我用第一种方法.=.=!

4. 让父容器和子容器一起飞翔

这个方法很强大,利用了浮动元素本身会闭合浮动元素,这种方法据说在IE中表现良好。不过,有多少个父容器真的想和子容器一起飞翔呢?再说了,如果父容器飘了,子容器再飘,要是还有子容器要飘,,,不管怎么说,我是受不了。

#container{float:left;}

这个飘的次数少些,可以接受下,毕竟是利用CSS的特性来处理,算是有些技巧的。在实际中,也许你会用下面这种方法:

5.给个高度钉死你

在子容器内容固定的时候,这个方法比较简单有效,快速的而不用思考,在多层次背景的应用效果不错。

#container{height:50px;}

上面已经给出了一般的处理方法,在实际的应用中,我们可能还会使用其他的一些技巧来处理这种问题。问题是死的,人是活的嘛。 

 

Tuesday, June 12, 2012 | CSS&CSS3

文章评论

  • # re: DIV+CSS处理DIV设置float后,父容器无法定位高度的问题解决
    实用,感谢分享。

发表评论

Please add 6 and 1 and type the answer here:

关于博主

  一枚成分复杂的网络IT分子,属于互联网行业分类中的杂牌军。