.top{height:100px;background:#ccc;}
.main{height:500px; margin:0 auto; position:relative;}
.left{ width:200px; height:500px; position:absolute; left:0; top:0; background:blue;}
.right{ height:500px; margin-left:200px; background:yellow;}
.foot{height:50px;background:#F63;}
</style>
.main{height:500px; margin:0 auto; position:relative;}
.left{ width:200px; height:500px; position:absolute; left:0; top:0; background:blue;}
.right{ height:500px; margin-left:200px; background:yellow;}
.foot{height:50px;background:#F63;}
</style>
最赞回答 / NeoWu95
clear:both这个简单的来说，清除左右的float元素，不允许两边有浮动元素，就是使这个div独占一行，至于使用了clear:both并且float的div，前后若有行内元素，即inline，是会产生错位或者block元素和inline元素重叠
2016-04-12
最新回答 / 倾昀
.header{width: 100%;height: 80px;background-color: #303030;position:absolute;top:0;z-index:2;opacity: .8}.footer{width: 100%;height: 21px;border-top:1px solid #f0f0f0;background-color:white;position: absolute;bottom:0;z-index: 1;opacity: .8}上面2行改成.header{...
2016-04-12
已采纳回答 / _Jack_Han_
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-...
2016-04-11
.top{background:#ccc;height:100px;}
.main{background:red;height:300px;}
.left{float:left;width:45%;background:blue;height:300px;}
.right{float:right;background:lightgreen;width:50%;height:300px;}
.foot{clear:both;height:60px;background:orange;}
.main{background:red;height:300px;}
.left{float:left;width:45%;background:blue;height:300px;}
.right{float:right;background:lightgreen;width:50%;height:300px;}
.foot{clear:both;height:60px;background:orange;}
.left{ width:200px; height:600px; background:#ccc;float:left;}
.main{width:540px;float:left;height:600px; background:#9CF;margin-left: 10px;}
.right{ width:200px;height:600px;float:right; background:#FCC;}
.main{width:540px;float:left;height:600px; background:#9CF;margin-left: 10px;}
.right{ width:200px;height:600px;float:right; background:#FCC;}