方法一：float布局

html部分：

<div class="container">
	<div class="left">111222333444555666777888999</div>
	<div class="right">111222333444555666777888999</div>
	<div class="main">111222333444555666777888999</div>
</div>

css部分：

*{margin: 0;padding: 0;overflow: hidden;}
    .left{width: 200px;height: 500px;
			background-color: red;float: left;}
    .right{width: 200px;height: 500px;
			background-color: blue;float: right;}
    .main{height: 500px;background-color: pink;
    margin-left: 200px;margin-right: 200px;
    }

左右定宽，中间自适应

左右两个盒子脱离了标准流分别向左右浮动，但是需要在html中要先写左右两个盒子的代码。

如果右盒子在中间盒子后面，那么中间盒子会摆满整行，而右盒子会在下一行向右浮动。

方法二：BFC布局

利用BFC区域不会与浮动元素重叠这一点

html部分：

 <div class="container">
        <div class="left">111222333444555666777888999</div>
        <div class="right">111222333444555666777888999</div>
        <div class="main">111222333444555666777888999</div>
</div>

css部分：

.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:pink;}

通过main盒子的overflow: hidden不与浮动盒子重叠

方法三：圣杯布局

html部分：

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

为了让中间内容优先被浏览器渲染，所以将main盒子靠前放置

css部分：

*{margin: 0;padding: 0;}
body{min-width: 700px;}
.left,.main,.right{
   position: relative;//定位使左右盒子向两侧移动
   min-height: 500px;
   float:left;
}
.container{
  padding:0 200px 0 200px;//使容器内盒子左右内边距为200px
  overflow:hidden;//触发BFC消除浮动
}
.left{
   margin-left:-100%;//使盒子在一行显示
   left:-200px;
   width:200px;
   background:red;
}
.right{ 
   right:-200px;
   margin-left: -220px;//使盒子在一行显示
   width:220px;
   background:green;
}
.main{
    width:100%;
    background:blue;
}

方法四：双飞翼布局

html部分：

<div class="container">
    <div class="main">
        <div class="content">main</div>//用来显示内容
    </div>
        <div class="left">left</div>
        <div class="right">right</div>
</div>

css部分：

<style type=" text/css">
    *{margin: 0;padding: 0;}
    .left,.main,.right{
        float: left;
        height: 500px;}/*只有浮动 没有任何位置设置*/
    .container{overfLow: hidden;}
    .left{margin-left:-100%;
        width: 200px ;
        background:red; }
    .right {margin-left:-200px;
        width: 200px; 
        background:blue;}
    . main{ width: 100%;
        background:pink;}
    . content{margin: 0 200px 0 200px;}//子div用margin给两侧留出位
</style>

方法五：flex布局

html部分：

    <div class="container">
	<div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
    </div>

css部分：

.container {display: flex;}
.main {     flex-grow: 1;//放大比例为1
	    height: 500px;
	    background-color: pink;}
.left {	    order: -1;//排列顺序，越小越靠前
	    flex: 0 1 200px;//放大比例默认0，缩小比例默认1，分配空白前定下的不变宽度
	    height: 500px;
	    background-color: blue;}
.right {    flex: 0 1 200px;//放大比例默认0，缩小比例默认1，分配空白前定下的不变宽度
	    height: 500px;
	    background-color: green;}

详情翻阅：

Flex 布局：语法部分 juejin.cn/post/684490…

方法六：table 布局

html部分：

 <div class="container">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
    </div>

类似表格形式，需按照顺序放置

css部分：

.container {
	    display: table;
	    width: 100%;
        }
.left, .main, .right {
	    display: table-cell;
        }
.left {
	    width: 200px;
	    height: 300px;
	    background-color: red;
        }
.main {background-color: pink;}
.right {
	    width: 200px;
	    height: 300px;
	    background-color: blue;
        }

方法七：grid布局

html部分：

<div class="container">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
</div>

css部分：

.container{
	display: grid;
	width: 100%;
	grid-template-rows: 300px;
	grid-template-columns: 400px auto 500px;
}
.left{
	background-color: red;
}
.right{
	background-color: blue;
}
.center{
	background-color: pink;
}

详情翻阅：

CSS基础之Grid布局

juejin.cn/post/684490…

效果如下