<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*最外边的盒子*/
.container{
/*盒子左边距*/
margin-left: 40px;
/*盒子右边距*/
margin-right: 40px;
border: 1px solid red;
}
/*左边的盒子*/
.container .aside-left{
width: 200px;
/*左浮动*/
float: left;
border: 1px solid blue;
}
/*右边的盒子*/
.container .aside-right{
width: 200px;
/*设置右浮动*/
float: right;
border: 1px solid yellow;
}
/*中件的盒子开启BFC*/
.container .main{
overflow: hidden;
border: 1px solid palegreen;
}
</style>
</head>
<body>
<div class="container">
<div class="aside-left">左边栏</div>
<div class="aside-right">右边栏</div>
<div class="main">主区域</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/weixin2623670713/p/13298502.html