两边固定，中间自适应
本篇总结五种思路实现方式，
圣杯布局
圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面
第一步：中间盒子100%，两边固定宽度，三个盒子依次上下
第二步：子盒子全左浮动 left与right脱离文档流 在第二行
第三步：父级盒子不要给宽度，padding：0 200px;留出左右盒子位置
第四步： left 盒子
（1）margin-left:100% 先将浮动元素向上移动一行文档流‘
（2）position：relative；left：自身宽度 ；微调left位置(此处可以用position：absolute 也行)
第五步：right盒子使用margin-right：自身宽度
第六步：清除浮动，不然可能带来高度塌陷问题
代码如下：
CSS
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
.main{
position: relative;
padding: 0 200px;
min-height: 400px;
}
.content,.left,.right{
float: left;
}
.content{
width: 100%;
min-height: 500px;
background-color: hotpink;
}
.left,.right{
background-color: greenyellow;
width: 200px;
min-height: 300px;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
/*
通过absolute
position: absolute;
left: 0;
*/
z-index: 1000;
}
.right{
margin-right: -200px;
}
</style>
<body>
<div class="main clearfix">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
双飞翼布局
双飞翼布局，左右两边像是翅膀插在两边，像每一个平凡人一样需要借助外部力量才能飞翔。
所以中间 与 左右 不属于同级
left right 像是翅膀 通过margin-left插在左右两边
content 通过margin 调整
第一步：中间父盒子，左右盒子 依次上下排开
第二步：中间父盒子，左右盒子全部脱离文档流，中间父盒子设置100%独占一行
第三步：中间盒子通过margin值调整 margin：0 200px 给左右盒子腾出位置
第四步：left盒子，通过margin-left:-100% 向上一行文档流
第五步：right盒子 通过margin-left:-200px 调整位置
第六步：清除浮动，不然可能带来高度塌陷问题
CSS
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
.main,.left,.right{
float:left;
}
.main{
width: 100%;
/* min-height: 400px;
background-color: pink; */
}
.content{
margin: 0 200px;
height: 500px;
background-color: pink;
}
.left,.right{
width: 200px;
height: 300px;
background-color: greenyellow;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
</style>
<body class="clearfix">
<div class="main">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
calc()函数
width：calc（100%-400px）
注意：
calc() 函数用于动态计算长度值。
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
步骤：
一：左中右 盒子 依次上下排开
二：赋值宽度 left right 200px
中间 100% -400px
三 ：子盒子浮动
缺点 只兼容到ie9 计算会阻塞加载 对渲染不友好
CSS
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.main{
width: 100%;
}
.content,.left,.right{
float:left;
}
.left,.right{
width: 200px;
min-height: 300px;
background-color: greenyellow;
}
.content{
width: calc(100% - 400px);
min-height: 400px;
background-color: indianred;
}
</style>
<body>
<div class="main">
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
</body>
定位
定位也是比较常见的实现布局的方式
中间盒子 margin：0 200px
左右分别使用定位去到对应为位置即可
<body>
<div class="main">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
.main{
position: relative;
width: 100%;
min-height: 400px;
}
.content{
margin: 0 200px;
min-height: 400px;
background-color: pink;
}
.left,.right{
position: absolute;
width: 200px;
height: 300px;
background-color: yellowgreen;
}
.left{
left: 0;
top: 0;
}
.right{
top: 0;
right: 0;
}
</style>
Flex
flex 是个人觉得布局最方便的方式了。而且兼容性也越来越好，代码简洁
父容器 flex 中间盒子flex：1 即可
CSS
<style>
*{
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.box{
height: 100vh;
display: flex;
}
.left,.right{
width: 200px;
min-height: 500px;
background-color: greenyellow;
}
.content{
background-color: pink;
min-height: 500px;
flex: 1;
}
</style>
<body>
<div class="box">
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
</div>
</body>
总结
实现的方式有很多种，这个问题算是面试比较基础的吧，还有别的方式，像利用table，grid（栅格，有一定兼容性）等来实现
另外布局时，建议尽量减少定位 和 浮动来布局 ，在考虑兼容的同时实现快速布局，推荐flex
是本人第一篇博客，写的比较简单，主要还是为了方便自己闲暇时间可以扫一眼。依次养成一个良好习惯。记得刚入行时，有一个面试官问我，你每天除了工作，主动学习前端技术的时间平均有多少。当时真是充满愧疚哈哈。
代码源自于从一些资料，教程总结，亲测有效。侵删。
全力以赴奔向你le。
