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> |
看看效果：
显然父的没有把子的包含在里面，而且父层没有撑开，到处父层二直接与父层一挨着了。
那么设置的方法有两个，第一种是将父层一设置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> |
还有一种方法是在父层二加上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> |
现在大家该明白了吧。大家可以根据自己的要求来设置。
超链接中rel=“external nofollow”和rel=“nofollow”的区别 MSSQL表中大量数据时建立索引或添加字段后保存更改超时
