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

最新推荐文章于 2022-05-29 11:50:35 发布

Prudery

最新推荐文章于 2022-05-29 11:50:35 发布

阅读量4.3k

点赞数 2

分类专栏：网页设计文章标签： DIV自适应高度子层浮动 clear属性 clearfix

本文链接：https://blog.csdn.net/bixingtao/article/details/43201287

版权

网页设计专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

<!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的作用，就不详述了。

Prudery

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
关于层DIV自适应高度的问题总汇(加入clearfix方法)

我们先来看一个最普通的父层自适应子层高度的例子(通常来讲,布局时父层都是不设置高度的).f{ width:200px; border:1px solid #000; padding: 25px; margin: 50px auto;}.z{ width:200px; height:200px; background:#000} 运行结果是这样的如下图所示
复制链接

扫一扫

专栏目录