div css布局中想实现一个层上面有两个层设置但是第三个背景颜色在浏览器中不显示
<styletype="text/css">#red{background:#F00;height:200px;width:200px;float:left}#s2{ba...
<style type="text/css">
#red {
background: #F00;
height: 200px;
width: 200px;
float:left
}
#s2 {
background: #0C3;
height: 200px;
width: 200px;
float: left
}
#s3 {
background: #00C ;
height: 100px;
width: 400px;
}
</style>
</head>
<body>
<div id="red">此处显示 id "red" 的内容</div>
<div id="s2">此处显示 id "s2" 的内容</div>
<div id="s3">此处显示 id "s3" 的内容</div> 展开
#red {
background: #F00;
height: 200px;
width: 200px;
float:left
}
#s2 {
background: #0C3;
height: 200px;
width: 200px;
float: left
}
#s3 {
background: #00C ;
height: 100px;
width: 400px;
}
</style>
</head>
<body>
<div id="red">此处显示 id "red" 的内容</div>
<div id="s2">此处显示 id "s2" 的内容</div>
<div id="s3">此处显示 id "s3" 的内容</div> 展开
3个回答
展开全部
原因是，这是因为你前面有浮动元素后面要么清楚浮动，要么跟着浮动，不然默认背景就直接滑动到前面浮动元素的底层（也就是说实际上你的蓝色块的背景实际上是被红色和绿色框遮住了，不信你吧s3的高度增加的大于200px试试！）。
给你两种解决方案：
第一，在两个浮动的元素后面增加有clear:both样式属性的标签；
<div id="red">此处显示 id "red" 的内容</div>
<div id="s2">此处显示 id "s2" 的内容</div>
<div style=" clear:both"></div>
<div id="s3">此处显示 id "s3" 的内容</div>
效果如图：
第二，给你的s3样式里面增加浮动（随便左或者右浮动）
#s3 {
background: #00C ;
height: 100px;
width: 400px;
float: left
}效果如图：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#s3 {
background: #00C ;
height: 100px;
width: 400px;
clear:both; /*加上这个就好了*/
}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在第三个层里面加clear:both;这个属性就好了哦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
