三栏布局的意思是整个页面分为左中右三部分，左右宽度固定，中间宽度随浏览器宽度自适应。
1.流体布局
<style>
.left {
float: left;
height: 200px;
width: 100px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
左边部分左浮动，右边部分右浮动，中间部分设置左右margin，则中间部分的宽度可自适应。
2.BFC布局
<style>
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
background-color: blue;
}
.main {
height: 200px;
overflow: hidden;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
左边部分左浮动，设置margin-right；右边部分右浮动，设置margin-left。
上面两种布局思想是一样的，都是利用margin来逼夹距离实现。但是有一个共同的缺点：中间的主要内容模块无法最先加载，因为中间的大小需要取决于两边固定大小的部分，所以无法最先加载
3.双飞翼布局
<style>
.content {
float: left;
width: 100%;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
background-color: blue;
}
</style>
<body>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
浮动元素margin负值的应用，利用负值，将左右部分覆盖在中央内容上面。这个的主体内容可以优先加载。
4.圣杯布局
<style>
.container {
margin-left: 120px;
margin-right: 220px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: red;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
background-color: blue;
}
.right {
float: right;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
和双飞翼布局思想一样，利用的是margin负值的应用，不同的是这个是将中间部分收缩，把左右部分往左右排出。同样可以优先加载主体页面。
5.Flex布局
<style>
.container {
display: flex;
}
.main {
flex-grow: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;
flex: 0 1 200px;
margin-right: 20px;
height: 300px;
background-color: blue;
}
.right {
flex: 0 1 100px;
margin-left: 20px;
height: 300px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
较为主流的布局方法，关于Flex布局的详细信息，可参考 juejin.cn/post/684490…
6.grid布局
<style>
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 300px;
}
.left {
background-color: blue;
}
.main {
background-color: red;
}
.right {
background-color: green;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</body>
网格布局，结构简单，也是较为主流的一种布局方法。
