标签:
首先我想实现这样一个效果:
我设置一个<div class="content"></div>背景为黄色,然后在其中设置两个div
分别为<div class="left"></div> ,<div class="right"></div>分别设置左浮动,背景
颜色蓝色和右浮动背景颜色红色
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=‘utf-8‘>
<title></title>
<style type="text/css">
.content{background: yellow;width:900px;}
.left{background: blue; height: 200px; width: 600px;float: left;}
.right{background: red; height: 500px; width: 300px;float: left;}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
但是我发现运行效果是这个样子的:
这是由于浮动产生的影响,在这里就要对 父元素清除浮动,但是在这里用clear:borth;却没有效果,
因此要用到清除浮动的第二种办法overflow:hidden;
.content{background: yellow;width:920px;overflow: hidden;}
最终实现效果:
标签:
原文地址:http://www.cnblogs.com/zhanyou/p/4943949.html