1、现象

<!DOCTYPE html >

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>重叠DIV</title>

<style>

.left{width:200px; float:left; color:#F00; border:1px solid #F00}

.nofloat{width:100px; background:#CCC}

</style>

</head>

<body>

<div class="left">left对象DIV内</div>

<div class="nofloat">nofloat对象DIV内</div>

</body>

</html>

　　

2原因分析

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

3、解决方法

（1）清除样式

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

html div重叠问题，原因分析和处理的更多相关文章

  1. z-index失效原因分析——由一个bug引发的对层叠上下文和z-index属性的深度思考

    新年刚开工就被一个bug虐得整个人都不好了,特地记录下. (一)bug描述 在一个fixed-data-table(一个React组件)制作的表格中,需要给表头的字段提示的特效,所以做了一个提示层,但 ...

  2. SELECT TOP 1 比不加TOP 1 慢的原因分析以及SELECT TOP 1语句执行计划预估原理

    本文出处:http://www.cnblogs.com/wy123/p/6082338.html 现实中遇到过到这么一种情况: 在某些特殊场景下:进行查询的时候,加了TOP 1比不加TOP 1要慢(而 ...

  3. mysql索引无效且sending data耗时巨大原因分析

    一朋友最近新上线一个项目,本地测试环境跑得好好的,部署到线上却慢得像蜗牛一样.后来查询了一下发现一个sql执行了16秒,有些长的甚至80秒.本地运行都是毫秒级别的查询.下面记录一下困扰了两天的,其中一 ...

  4. 网站用域名能访问，用域名IP不能访问的原因分析

    原因分析:一般虚拟主机是不能直接输入IP进行访问的 因为一个IP下有很多网站 ,只能用域名进行访问.如果想IP也能访问,必须网站有独立的IP地址,不是共享IP.如果是IIS的话,要把主机头对应的域名去 ...

  5. JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法

    今天在程序中出现一个bugger ,调试了好久,最后才发现,原来是这个问题. 做了一个实验: alert(parseInt("01")),当这个里面的值为01====>07时 ...

  6. 在Android library中不能使用switch-case语句访问资源ID的原因分析及解决方案

    转自:http://www.jianshu.com/p/89687f618837 原因分析   当我们在Android依赖库中使用switch-case语句访问资源ID时会报如下图所示的错误,报的错误 ...

  7. div重叠不变形

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. uboot使用tftp下载时出现“checksum bad”问题原因分析

    一.问题 二.原因分析 你的虚拟机是不是这样设置的呢? 如果是的话,请看下边的解释: 使用NAT模式,就是让虚拟系统借助NAT(网络地址转换)功能,通过宿主机器所在的网络来访问公网.也就是说,使用NA ...

  9. Activity内部Handler引起内存泄露的原因分析

    有时在Activity中使用Handler时会提示一个内存泄漏的警告,代码通常如下: public class MainActivity extends Activity { private Text ...

随机推荐

  1. python 遇到的问题及解答

    1.使用pip安装python 模块 打开cmd 输入pip install *,如pip install numpy    等待安装(如下) C:\WINDOWS\System32>pip i ...

  2. web应用1

    阅读内容 一.web应用 二.web协议 三.web框架 四.补充知识 回到顶部 一.web应用 二.web协议 三.web框架 四.补充知识 五.补充知识

  3. pattern.define注意事项

    1.PAT:最好不要所有的关键字后面都用|,导致整条pattern变成无限统配.

  4. [路径规划] VFF和VFH

    VFF虚拟力场法 #ifndef VFF_HEADER #define VFF_HEADER #include <vector> #include "utils\point.h& ...

  5. PHP递归方法实现前序、中序、后序遍历二叉树

    二叉树是每个节点最多有两个子树的树结构.通常子树被称作“左子树”(left subtree)和“右子树”(right subtree). class Node { public $value; pub ...

  6. dubbo发布和引用服务

    1.首先添加相关的jar包到工程中 2.在spring(mvc)的配置文件中添加约束 xmlns:dubbo=http://code.alibabatech.com/schema/dubbo http ...

  7. 产品设计教程：利用“系列位置效应”优化UI

    任何博得人们喜欢的产品都在一定程度上契合了用户的心理需求.设计和心理学息息相关,掌握一些基本心理学知识,设计师的作品更能在潜意识中抓住用户的心. 系列位置效应 “系列位置效应”(The Serial ...

  8. js模拟栈---汉诺塔

    var Stack = (function(){ var items = new WeakMap(); //先入后出,后入先出 class Stack{ constructor(){ items.se ...

  9. 回归评价指标MSE、RMSE、MAE、R-Squared

    分类问题的评价指标是准确率,那么回归算法的评价指标就是MSE,RMSE,MAE.R-Squared. MSE和MAE适用于误差相对明显的时候,大的误差也有比较高的权重,RMSE则是针对误差不是很明显的 ...

  10. 49.CSS--- 特殊css3效果展示

    1.设置多行文本超出显示省略号<div class="caption"> <p>显示超过两行就显示省略号,其余隐藏,隐藏不了的情况下给这个模块添加一个高度和 ...