没有清除浮动吧?试一下这个处理:
上一个div中加入 clear:both
上一个div中加入 overflow:hidden
还不行的话,吧所有相关文件打个包,给我看看。
方法一:text-decoration-skip指定覆盖关系text-decoration-skip是与text-decoration相关的CSS3属性。效果很不错,不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性,且仅仅支持skip(默认值)和none两个值。此方法是最原生的,但是由于兼容性问题,目前还不太合适。方法二:使用border-bottom属性模拟我觉得这是一个不错的想法,CSS博大精深,哈哈。^.^内联元素虽然不支持垂直方向的margin属性,但是支持垂直方向的padding属性和border属性,并且,对原来的布局定位等没有任何影响。因此,配合padding,我们就可以很有效地调节下边框和文字下边缘的距离,实现我们最想要的的效果。(张老师的原话)代码如下:a {text-decoration: noneborder-bottom: 1px solid}这样写的有点在于border-bottom还有dashed属性,我们还可以创造虚线下划线 :Pa {text-decoration: noneborder-bottom: 1px dashed}效果图:金玉全王方法三:使用box-shadow属性模拟使用box-shadow的想法也是很棒的,其实动动脑子,CSS还有好多玩法。(●'◡'●)直接上代码~a {text-decoration: nonebox-shadow: 0 1px}这里box-shadow用了两个值,在这里解释一下:box-shadow: h-shadow v-shadow blur spread color inset此处的两个值分别是 h-shadow 和 v-shadow。h-shadow:水平阴影的位置。允许负值。v-shadow:垂直阴影的位置。允许负值。垂直阴影为1px于是就有了下划线的样子。相比border-bottom属性,box-shadow的优势在于,即使我们把内联元素设置成display:inline-block,生成的下划线也不会对垂直对齐或者布局产生影响,但,如果是border-bottom,会增加元素的尺寸,可能就会影响元素的排列。但是,box-shadow也有不足,一是兼容性,IE9+才支持,二是只能实线,不能虚线。在做css+div布局是重叠有很多中情况,我给你分析分析
首先看看一个容器套两个字容器的情况,在我们做布局的时候网页中div之间的关系基本都可以简化到这种关系。
代码如下
<!DOCTYPE html><html>
<head>
<title>DIV_TEST</title>
<meta charset="utf-8"/>
<style type="text/css">
div{border: 1px solid #000}
#top1{
width: 200px
}
#top1Sun1{
background-color: aquamarine
width: 150px
}
#top1Sun2{
background-color: bisque
width: 150px
}
</style>
</head>
<body>
<div id="top1">
top1
<div id="top1Sun1">top1Sun1</div>
<div id="top1Sun2">top1Sun2</div>
</div>
</body>
</html>
下面我们来看一下那种方式可能会产生重叠
1、margin为负数的情况
现在我们将top1Suan2的margin-top设置成-10px
可以看到top1Sun2向上偏移了10个像素,因此这中情况是可能产生重叠的。
2、绝对定位
这个不用解释了,肯定可以产生重叠
3、父容器高度不固定,子容器使用float,看看父容器的兄弟容器会不会产生偏移
不使用float的时候是这样的
代码如下
<!DOCTYPE html><html>
<head>
<title>DIV_TEST</title>
<meta charset="utf-8"/>
<style type="text/css">
div{border: 1px solid #000}
#top1{
width: 600px
}
#top1Sun1{
background-color: aquamarine
width: 150px
height: 200px
}
#top1Sun2{
background-color: bisque
width: 150px
height: 200px
margin-top: -10px
}
#top2{
height: 100px
background-color: #eee
}
</style>
</head>
<body>
<div id="top1">
top1
<div id="top1Sun1">top1Sun1</div>
<div id="top1Sun2">top1Sun2</div>
</div>
<div id="top2"></div>
</body>
</html>
现在让top1Sun1、top1Sun2的float都为left
你会发现,top2容器居然和top1发生了重叠
发生这种情况的原因是因为top1我们没有设置固定高度,当他的两个字容器向左浮动时,top1的高度就不会被他的子容器撑开了,这是我们可以选择两个方法给top1提供高度占位,一种是设置固定高度,还有一种是设置top1的overflow为hidden(这种方式会让父容器高度自适应字容器),现在我们把top1的overflow设置为hidden看下效果
布局达到了我们预想的效果(top1Sun2因为设置了margin-top:-10px所以会往上偏移10像素,多出的部分,因为父容器设置了溢出隐藏,所以看不到了)