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. ETL ： kettle Spoon 转换 + 作业

    Kettle能做什么? 前言 : 需将db2中数据导入到mysql中,利用etl工具进行多表转换.以此为切入点,系统整理.学习kettle工具. 提醒: kettle是纯java编写,机器需要有jre ...

  2. centos7.6删除重新安装python和yum

    最近在开发一个项目时出现了错误,需要重新安装python和yum,怎么安装呢?随ytkah一起来看看吧.ytkah用的linux分支的centos7.6,各位朋友在下载源的时候要注意版本的区分.现在开 ...

  3. 微信小程序可以转发给微信好友了

    微信小程序又放大招了:小程序页面可以放置转发按钮,分享更流畅.同时开放了微信运动步数.背景音乐播放等更多基础能力.小程序可以在自己的页面上放置转发按钮,用户点击后,即可将喜欢的内容分享给好友或群聊,体 ...

  4. wamp3.1.0下载地址

    WAMP是Windows用来搭建网站或服务器的开源软件,包含Apache + Mysql/MariaDB + Perl/PHP/Python等开发组件,方便快速便捷配置环境,很多朋友说wamp官网下载 ...

  5. open()：打开文件

    1.open():使用指定的模式和编码打开文件,返回文件读写对象 2.使用说明: (1)使用格式:open(filename [, mode [, bufsize]])(2)打开一个文件,返回一个fi ...

  6. 016-插件使用-head

    一.安装以及概览 elasticsearch-head将是一款专门针对于elasticsearch的客户端工具 elasticsearch-head配置包,下载地址:https://github.co ...

  7. sqlserver生成表结构文档的方法

    只说原理了,具体 可以自己使用程序去生成htm或word文档. 1.首先获取所有的表 SELECT name, id From sysobjects WHERE xtype = 'u' ORDER B ...

  8. Redis入门到高可用（八）——list

    一.结构 key - value 结构,value是一个有序队列. 可进行左边的添加及弹出,右边的添加及弹出. 可获取列表的长度,删除列表中指定元素,获取列表的子列表,按照索引获取列表的指定元素. 特 ...

  9. cocos2d JS-(JavaScript) 类型检测与判断

    //检测类型 var str = "Hello World"; if (typeof str=="string") {//使用typeof来判断对象类型的一个例 ...

  10. Mysql8.0.11安装以及注意事项

    一.环境配置 首先在官网下载最新的mysql8.0.11数据库,解压到你需要放置的盘符最好不要有中文,然后新建MYSQL_HOME,参数为mysql解压后安装文件的bin文件路径如我的:变量名:MYS ...