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. vue-router利用url传递参数

    app.vue <template> <div id="app"> <router-link to="/">home< ...

  2. LeetCode之有效括号

    class Solution:    def isValid(self,s):         #第一步,if 判断传入为空的情况        if s == "":      ...

  3. 多线程下的单例-double check

    话不多说直接上代码: public sealed class Singleton { private static Singleton _instance = null; // Creates an ...

  4. 关于vue中eslint规范报错问题

    /* global _ */这样 页面_就不会报错了

  5. element-dialog封装成子组件

    1.父组件 <template> <card-layout :title="L('Users')" :actions="actions" @c ...

  6. Nginx解析PHP的原理 | CGI、FastCGI及php-fpm的关系

    Nginx解析PHP的原理,CGI/FastCGI以及PHP-Fpm的关系. 一.PHP+Nginx应运而生的场景.随着互联网的发展,用户对此接受面广,数据流的增大使得Web端的运行承载压力日益增大, ...

  7. elasticsearch 处理index 一直INITIALIZING状态

    elasticsearch一个节点异常重启后有一个index恢复的过程中状态一直INITIALIZING 处理方法 PUT index_name/_settings { "index&quo ...

  8. JDBC 接口学习

    说明:文章所有内容皆选自实验楼教程[JDBC 入门教程],想要学习更多JDBC,可以点击教程进行学习~ JDBC 简介 JDBC 的全称是 Java Database Connectivity,叫做 ...

  9. linux系统中CST与EDT时间转换

    初始时间:2012年 09月 14日 星期五 18:15:33 EDT [root@test ~]# mv /etc/localtime /etc/localtime.bak [root@test ~ ...

  10. [LeetCode] 590. N-ary Tree Postorder Traversal_Easy

    Given an n-ary tree, return the postorder traversal of its nodes' values. For example, given a 3-ary ...