明凯博客

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

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

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

这里是子DIV一
这里是子DIV二
这里是父DIV一
这里是父DIV二

看看效果:

div1

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

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

这里是子DIV一
这里是子DIV二
这里是父DIV一
这里是父DIV二

div2

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

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

这里是子DIV一
这里是子DIV二
这里是父DIV一
这里是父DIV二

div3

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

, ,

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注