1.使用自身浮动法：
自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。
该布局法的不足是三个元素的顺序，middle一定要放在最后，middle占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <style>
9 .containter{
10 width:100%;
11 height:200px;
12 }
13
14 .left{
15 width:300px;
16 height:100%;
17 float: left;
18 background: blue;
19 }
20
21 .center{
22 height:100%;
23 margin-left: 300px;
24 margin-right: 300px;
25 background: red;
26 }
27 .right{
28 height:100%;
29 width:300px;
30 background: blue;
31 float: right;
32 }
33
34 </style>
35 <!--中间部分一定要放最后-->
36 <div class="containter">
37 <div class="left"></div>
38 <div class="right"></div>
39 <div class="center"></div>
40 </div>
41 </body>
42 </html>
2.使用绝对定位法：
绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的middle会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。
该法布局的好处，三个div顺序可以任意改变。但是因为是绝对定位，如果页面上还有其他内容，top的值需要小心处理。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <style>
9 .containter{
10 position: relative;
11 width:100%;
12 height:500px;
13 }
14 .left{
15 position: absolute;
16 top:0;
17 left: 0;
18 width:300px;
19 height:100%;
20 float: left;
21 background: blue;
22 }
23
24 .center{
25 height:100%;
26 margin-left: 300px;
27 margin-right: 300px;
28 background: red;
29 }
30 .right{
31 position: absolute;
32 top:0;
33 right: 0;
34 height:100%;
35 width:300px;
36 background: blue;
37 float: right;
38 }
39
40 </style>
41
42 <div class="containter">
43 <div class="left"></div>
44 <div class="center"></div>
45 <div class="right"></div>
46 </div>
47 </body>
48 </html>
3.使用flex布局：
设置一个父div，添加样式display：flex。中间div设置flex-grow：1，（等同代码中设置flex：1。flex是grow、shrink、basis的简写）但是盒模型默认紧紧挨着，可以使用margin控制外边距。middle一定在中间，否则需要order属性来调整。
通过项目属性flex-grow设置middle的放大比例，将空余的空间用middle来填充，使三个项目排满一整行；默认为0，也就是对剩余空间不做处理。通过项目属性flex-basis 设置left和right的固定宽度。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .main{
8 width:100%;
9 height:500px;
10 display: flex;
11 flex-direction: row;
12 justify-content: flex-start;
13 }
14
15 .left{
16 flex:0 1 200px;
17 height:500px;
18 background-color: red;
19 }
20
21 .middle{
22 flex:1;
23 height:100%;
24 background-color: yellow;
25
26 }
27
28 .right{
29 flex:0 1 500px;
30 height:500px;
31 background-color: blue;
32 }
33 </style>
34 </head>
35 <body>
36 <div class="main">
37 <div class="left"></div>
38 <div class="middle"></div>
39 <div class="right"></div>
40 </div>
41 </body>
42 </html>
flex布局教程：
https://www.runoob.com/w3cnote/flex-grammar.html
来源：https://www.cnblogs.com/yinhao-jack/p/11747871.html