明凯博客

关注网站技术,一个特立独行的程序员

div子元素浮动时高度不会自动撑开的问题

div内部元素是浮动的,比如div中有左右两个div并列,查看生成的页面后,父div的height被设置为0,即使div的height设置为100%也没有用。
现在我们来看看那效果,假如有四个层DIV,两个父层,两个子层。

1
2
3
4
5
6
7
8
9
10
11
12
<div style="width:550px;background:yellow;">
 <div style="float:left;width:200px;height:100px;background:red;">
 	这里是子DIV一
 </div>
 <div style="float:right;width:200px;height:100px;background:blue;">
	这里是子DIV二
 </div>
 	这里是父DIV一
</div>
<div style="width:550px;background:green;">
	这里是父DIV二
</div>

看看效果:

div1

显然父的没有把子的包含在里面,而且父层没有撑开,到处父层二直接与父层一挨着了。

那么设置的方法有两个,第一种是将父层一设置overflow:hidden;

1
2
3
4
5
6
7
8
9
10
11
12
<div style="width:550px;background:yellow;overflow:hidden;">
 <div style="float:left;width:200px;height:100px;background:red;">
 	这里是子DIV一
 </div>
 <div style="float:right;width:200px;height:100px;background:blue;">
	这里是子DIV二
 </div>
 	这里是父DIV一
</div>
<div style="width:550px;background:green;">
	这里是父DIV二
</div>

div2

还有一种方法是在父层二加上clear:both;

但是这种方法看起来是撑开了,但还是跟第一种方法有区别的,因为父层一并没有撑开,而是父层二在子层的下面显示,而不是在父层的位置显示。

1
2
3
4
5
6
7
8
9
10
11
12
<div style="width:550px;background:yellow;">
 <div style="float:left;width:200px;height:100px;background:red;">
 	这里是子DIV一
 </div>
 <div style="float:right;width:200px;height:100px;background:blue;">
	这里是子DIV二
 </div>
 	这里是父DIV一
</div>
<div style="width:550px;background:green;clear:both;">
	这里是父DIV二
</div>

div3

现在大家该明白了吧。大家可以根据自己的要求来设置。

, ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注