源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: html中div重叠问题的原因分析和处理 [打印本页]
作者: 欧阳锋    时间: 2019-10-21 22:38
标题: html中div重叠问题的原因分析和处理
先来看下一段代码：
  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>重叠DIV</title>
  6. <style>
  7. .left{width:200px; float:left; color:#F00; border:1px solid #F00}
  8. .nofloat{width:100px; background:#CCC}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="left">left对象DIV内</div>
  13. <div class="nofloat">nofloat对象DIV内</div>
  14. </body>
  15. </html>
复制代码

运行效果：

(, 下载次数: 63)


原因分析

class=left的div盒子使用了浮动属性float:left，而class=nofloat未使用。这样一个浮动DIV，一个未使用float浮动属性，所以就造成重叠现象。

解决方法

（1）清除样式

（2）2个都用浮动，或者都不用








欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3