关于层DIV自适应高度的问题总汇(加入clearfix方法)

来源：互联网发布：linux ftp日志在哪里编辑：程序博客网时间：2024/06/06 04:01

我们先来看一个最普通的父层自适应子层高度的例子(通常来讲,布局时父层都是不设置高度的)

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>.f{ width:200px; border:1px solid #000; padding: 25px; margin: 50px auto;}.z{ width:200px; height:200px; background:#000}</style></head><body><div class="f">    <div class="z"></div></div></body></html>

运行结果是这样的如下图所示

可以看到,父层没有定义高度,其高度是根据子层DIV的高度适应,子层多高,父层就会相应的变化高度.

但是有些情况,我们的子层元素根据需要必须得给它一个浮动(float)的属性,来看代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>.f{ width:200px; border:1px solid #000; padding: 25px; margin: 50px auto;}.z{ width:200px; height:200px; background:#000; float: left}</style></head><body><div class="f">    <div class="z"></div></div></body></html>

现在,子层div增添了float:left这个属性,我们再来看看效果

可以看到,父层DIV的高度不随子层变化了,这样显然就不是我们需要的效果,当然,也可以在父层增加一个高度的属性来直接定义,但是这种方法是有很大弊端的,这里就不累述了,相信大家在平常的设计中也深受其害.

现在我们用立体思维想象一下,之所以会造成这种情况,是因为子层漂浮起来,而父层还在下面,实际上两个DIV已经不在一个平面上了,所以子层就无法撑开父层的高度了,因此,我们可以理解为,两个不再一个平面上的层,父层自适应属性是无效的.

那么我们先来试试将父层也浮动起来

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>.f{ width:200px; border:1px solid #000; padding: 25px; margin: 50px auto; float: left}.z{ width:200px; height:200px; background:#000; float: left}</style></head><body><div class="f">    <div class="z"></div></div></body></html>

如下图所示,高度问题解决了,但是布局问题又来了,层的居中没了

当然,我们可以用各种定位的方法来解决浮动层的居中问题,方法可行,但是略显麻烦,有一个简单快捷的方法很容易被新手忽略,就是clear属性,我们来看下边一段代码:

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>.f{ width:200px; border:1px solid #000; padding: 25px; margin: 50px auto;}.z{ width:200px; height:200px; background:#000; float: left}.cl{ clear: both}</style></head><body><div class="f">    <div class="z"></div>    <div class="cl"></div></div></body></html>

在最后增加了一个DIV,属性仅有一个,就是清除浮动,效果如下:

这样,既不影响布局,又能达到效果,也不用繁琐的绝对或者相对定位了.

以上的方法有个弊端，就是每次清除浮动的时候都需要增加一个空标签来使用。还有一种各位大神总结出来的一种简洁的终极方法“clearfix:after”

来看具体方法：

.clearfix:after{content:"\200B"; display:block; height:0; clear:both; }.clearfix{*zoom:1;}  /*IE/7/6*/

content:"\200B";这个参数，Unicode字符里有一个“零宽度空格”，即 U+200B，代替原来的“.”

还是上边的代码我们用after伪类的方法来写，如下

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>.clearfix:after{content:"\200B"; display:block; height:0; clear:both;}.clearfix{*zoom:1}.f{ width:200px; border:1px solid #000; padding: 25px; margin: 50px auto;}.z{ width:200px; height:200px; background:#000; float: left}</style></head><body><div class="f clearfix">    <div class="z"></div></div></body></html>

图就不截了，效果是一样的，这样只要在有浮动的父层加入clearfix类，就可以解决，不用每次都加一个空标签了，至于zoom、content和display的作用，就不详述了。

1 0