两边侧边栏一个左浮动一个右浮动并且宽度是一定的，这样两边就脱离了文档流，然后中间的部分就会在两个侧边栏的下面，只要留出两边宽度的margin值，中间就可以自适应了。
值得注意的是center部分的html要写在两个侧边栏下面，否则两个侧边栏会一高一低
简单，兼容性好，但需要清除浮动
使用绝对定位将两个盒子定位在左上角和右上角，原理与一方法差不多，也是利用脱离文档流。
值得注意的是这种方式html的顺序是不影响布局的
// style部分*{ margin: 0; padding: 0; } .left{ width: 100px; height: 500px; background: blue; position: absolute; left: 0; top: 0; } .right{ width: 100px; height: 500px; background: yellow; position: absolute; right: 0; top: 0; } .center{ height: 500px; margin: 0 100px; background: red; }// html部分 <div class="left">我是左边栏</div> <div class="center">我是中间内容</div> <div class="right">我是右边栏</div>复制代码 三、flex布局，父盒子display: flex,中间自适应部分flex:1,两侧固定宽高。
// style部分*{ margin: 0; padding: 0; } .container{ display: flex; } .left{ width: 100px; height: 500px; background: blue; } .right{ width: 100px; height: 500px; background: yellow; } .center{ height: 500px; flex: 1; background: red; }// html部分 <div class="container"> <div class="left">我是左边栏</div> <div class="center">我是中间内容</div> <div class="right">我是右边栏</div> </div>复制代码非常简单直接，就是兼容性不太好，不能兼容IE8以下的浏览器
四、表格布局，父级盒子设置display: table;width: 100%;,子级盒子display: table-cell;,左右两侧栏设置定宽。
兼容性比flex布局好点，但是当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的
// style部分*{ margin: 0; padding: 0; } .container{ display: table; width: 100%; } .left{ width: 100px; height: 500px; background: blue; display: table-cell; } .right{ width: 100px; height: 500px; background: yellow; display: table-cell; } .center{ height: 500px; background: red; /* display: table-cell; */ }// html部分 <div class="container"> <div class="left">我是左边栏</div> <div class="center">我是中间内容</div> <div class="right">我是右边栏</div> </div>复制代码 五、grid布局,父级盒子设置display: grid;,并且设置好有几行几列和宽高，轻松实现。
兼容性不太好
// style部分 *{ margin: 0; padding: 0; } .container{ display: grid; grid-template-rows: 500px; grid-template-columns: 100px auto 100px; } .left{ background: blue; } .right{ background: yellow; } .center{ background: red; }// html部分 <div class="container"> <div class="left">我是左边栏</div> <div class="center">我是中间内容</div> <div class="right">我是右边栏</div> </div>复制代码