文档章节

div相互覆盖,div与div盒子之间产生重叠覆盖现象的解决办法

尘世如潮
 尘世如潮
发布于 2016/03/23 10:44
字数 946
阅读 3400
收藏 1

    div覆盖div,出现div与div盒子之间产生重叠覆盖现象,而内容没有出现覆盖重叠现象原因与解决方法。

    可能你遇到过上下结构的布局,下面DIV内容重叠上面DIV内容上,也可能右面内容覆盖掉左面的DIV布局,形成DIV与DIV覆盖重叠现象,这些是什么问题如何解决?

    接下来博主将通过案例来演示这两种兼容性DIV覆盖重叠现象问题,并解释原因与解决方法。

   案例一、上下结构的DIV盒子覆盖   

1、首先,创建一个实例网页DIV CSS实例HTML代码:

实例代码说明:

    设置两个最大的div盒子分别CSS命名为“.boxa”和“.boxb”,两个大盒子宽度相同均为400px;
    对“.boxb”设置1px的黑色边框,高为40px,背景为黑色;
    然后在“.boxa”里添加两个小盒子,一个浮动靠左,一个浮动靠右;
    两个小盒子分别命名为“.boxa-l”“.boxa-r”;
    对两个小盒子,同时设置红色边框、css高为80px、宽度分别为280px和100px。

2、实例效果:

3、问题分析

目的效果:“.boxa”和“.boxb”布局是上下结构,“.boxa-l”和“.boxa-r”分别位于“.boxa”的左右;

实际效果:在浏览器中看到效果是两个盒子里内容是实现上下结构效果,但“.boxb”这个DIV跑到“.boxa”下面去了;内容没有发生覆盖,只有DIV发生覆盖现象。

原因分析:

    (1).DIV发生覆盖的原因

        “.boxa”大盒子里的子级盒子:“.boxa-l”和“.boxa-r”使用了浮动float属性而产生了浮动,所以导致“.boxa”没有被撑开“.boxa”没有高度,而同级的“.boxb”盒子与“.boxa”上下紧贴,所以导致“.boxb”DIV盒子就跑到“.boxa”子级DIV盒子下面形成了覆盖重叠现象;

    (2).内容没有发生覆盖的原因

        “.boxa”的子级盒子“.boxa-l”和“.boxa-r”里面有内容,自动撑开自己的盒子,形成自己的高度,所以没有发生重叠

4、解决方案

两种解决方案:

1、确定内容多少的话->直接给“.boxa”设置高度即可;

2、不确定内容多少的话->清除浮动;-------在“.boxa”盒子</div>闭合前加clear样式清除浮动。

效果截图:


·······································································································································

   二、左右相邻两个DIV重叠覆盖   

1、首先,创建一个实例DIV CSS实例HTML代码:

实例代码说明:

    设置两个盒子css命名分别为“.aa”和“.bb”;
    aa设置float:left、背景为白色、高度设置50px、边框为黑色
    bb没有设置浮动、背景颜色为灰色、高度为80px、边框为红色

2、实例效果:

3、问题分析

目的效果:aa和bb布局是左右并列结构,aa在左,bb在右;

实际效果:在浏览器中看到效果是“.aa”对应DIV盒子浮动覆盖在“.bb”对应DIV盒子之上,但内容没有覆盖;

原因分析:“.aa”对应DIV盒子使用了浮动,而同级“.bb”对应DIV盒子没有使用浮动;一个浮动,一个不浮动导致两个DIV不是在同个“平面”上,但内容不会照成覆盖现象,只有DIV形成覆盖现象。

4、解决方案

        要么都不使用浮动;

        要么都使用float浮动;

        要么对没有使用float浮动的DIV设置margin样式。

        比如这里“.aa”对应盒子会固定宽度为300px;对“.bb”对应盒子设置margin-left:302px(大于300即可,自己测试设置需要的值)即可实现不重叠覆盖现象。

© 著作权归作者所有

尘世如潮
粉丝 17
博文 55
码字总数 27264
作品 0
烟台
私信 提问
[布局概念] 关于CSS-BFC深入理解

写在前面 好记性不如烂笔头,研究了一下BFC,发现里面比较细的东西也是很多的!关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本...

OB丶Koro1
2017/05/04
0
0
前端03.css相关

一、关于css语法。 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector { property: value; property: value; ... property: value h1 {color:red; font-size:14px;} 二、...

苏浩智
2017/05/26
0
0
CSS注意事项(二)

选择器 标签选择器(学会灵活应用) 单个标签 直接使用标签名 多个标签 复杂选择器 div p 选择div内部的所有p元素 div > p 父元素为div的所有p元素 li + li 紧接在li之后的li元素 p ~ ul 选择前...

ShirlyK
2016/08/27
13
0
Css关于浮动造成父级塌陷的总结

基础概念 文档流: 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。 脱离文档流 脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候...

从零_开始
2017/10/09
0
0
内容(content)、填充(padding)、边框(border)、边界(margin):CSS中盒子模型有何区别?

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名: 内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模式都具备这些属性。 一个盒子模型由...

sinat_34719507
2016/12/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

哪些情况下适合使用云服务器?

我们一直在说云服务器价格适中,具备弹性扩展机制,适合部署中小规模的网站或应用。那么云服务器到底适用于哪些情况呢?如果您需要经常原始计算能力,那么使用独立服务器就能满足需求,因为他...

云漫网络Ruan
今天
5
0
Java 中的 String 有没有长度限制

转载: https://juejin.im/post/5d53653f5188257315539f9a String是Java中很重要的一个数据类型,除了基本数据类型以外,String是被使用的最广泛的了,但是,关于String,其实还是有很多东西...

低至一折起
今天
17
0
OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
11
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
9
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部