我们先来看一个最普通的父层自适应子层高度的例子(通常来讲,布局时父层都是不设置高度的)
<!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,属性仅有一个,就是清除浮动,效果如下:
这样,既不影响布局,又能达到效果,也不用繁琐的绝对或者相对定位了.
所以我们可以得出这样的结论:若要让父层的自适应高度起作用,就要让父层与其内的所有子层处在一个平面上,也就是要么都是浮动层,要么都不是浮动层
时间： 2024-08-03 03:00:23