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/rumen/r52879.shtml
