<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0 auto;
padding: 0 auto;
}
.top,
.banner,
.main,
.footer{
width: 960px;
margin: 0 auto;
border: 1px dashed #ccc;
text-align: center;
background-color: #eee;
}
.top{
height: 80px;
}
.banner{
height: 120px;
}
.main{
height: 500px;
}
.left{
width: 360px;
height: 500px;
background-color: pink;
float: left;
}
.right{
width: 592px;
height: 500px;
background-color: #0a2ffe;
float: right;
/* 左浮动有浮动是根据浏览器来浮动的 float 一定得要父亲来*/
}
.footer{
height: 120px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
原文：https://www.cnblogs.com/soyadios/p/11963267.html