css div不堆叠层叠几回再三遮挡起因与方案法子之css怎样让几个div不重叠,div不重叠，div与div之间不遮挡标题问题原因，设计法子操持思绪图文教程篇。CSS5经由三种方式意图怎么样让div不遮挡不重叠。
一、同级DIV有的是用float有的没有使用构成DIV重叠
赤色DIV与灰色布景DIV重叠展现
咱们看看代码
<!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; bac公斤round:#CCC}
</style>
</head>
<body>
<div class="left">left对象DIV内</div>
<div class="nofloat">nofloat对象DIV内</div>
</body>
</html>
造诣截图
两个div重叠遮挡展现
二、缘故原由阐发：
class=left的div盒子使用了浮动属性float:left，而class=nofloat未使用。何等一个浮动DIV，一个未运用float浮动属性，所以就组成堆叠情形。
三、规画办法：
1、两个均应用float浮动属性
对.left和.nofloat配置float属性，解决遮挡层叠。（扩展浏览 div并排不换行浮现）
同级div但凡有float这样就可不重叠排版
2、两个都不运用浮动属性。
两个div都不设置float浮动，妄想堆叠标题。
两个div不堆叠
3、第一个div配置float，第二个div设置margin属性利用间距让其不重叠
这类方式也是布局经常应用的，前提是带float要设置装备摆设宽度，同时不带float的div设置margin属性，操作间距办法，让没有配置float的div错开设置装备摆设float，完成div不堆叠。
行使flaot浮动与margin间距完成div重叠遮挡
四、总结
以上是颠末两个div重叠，从赏析、经管方式、图文筹划等方式CSS5介绍让div不重叠方式。假设更多几个div涌现以上重叠标题，同理运用以上办法教程异样很快筹划。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j53150.shtml
