三栏，两边固定，中间自适应
线索记忆：（和隔壁 两栏，左边固定，右边自适应的布局 一起记忆）
margin-left：「float方法（不成，强关联html结构）、绝对定位（左右绝对定位）」
flex布局：「flex:1」
『**BFC特性**：「左浮动，右BFC」（不成，强关联html结构）』
table/grid布局
calc() 方法：三浮动
<head> <!-- 先给出html标签 和 初始样式 -->
<style>
.left, .right {
width: 200px;
}
</style>
</head>
<div class="outer">
<div class="left">固定宽度区(left)</div>
<div class="middle">自适应区(middle)</div>
<div class="right">固定宽度区(right)</div>
</div>
① 浮动：不成
- 原理：『元素浮动后，脱离文档流，向左或者向右 移动直到遇到容器边缘/其他浮动盒子』 – 白话：middle 把 left 当做不存在（left 显示时压在 middle margin的上面），right 不会往上平移
- 同理，middle 盒子在结构上到 left 前面，left 和 right 一样都在第二行，不会往上平移
.left {
float: left;
}
.right {
float: right;
}
.middle {
margin: 0 200px;
}
- 改进：将中间的内容放在HTML结构的最后 -> 上面的 css 代码就可以实现三栏两遍固定，中间自适应了
<div class="outer">
<div class="left">固定宽度区(left)</div>
<div class="right">固定宽度区(right)</div>
<!-- 将中间的内容放在HTML结构的最后 -->
<div class="middle">自适应区(middle)</div>
</div>
② 左右绝对定位，中间 margin-left
.left, .right {
position: absolute;
}
.right {
right: 0;
top: 0; /* 注意设置 top，否则脱离文档流后，默认 auto - 叠加父级的 padding */
}
.middle {
margin: 0 200px;
}
③ flex布局：flex:1
.outer {
display: flex;
}
.middle {
flex: 1; /* 中间盒子能够撑开剩余空间 */
}
/* 如果没设置宽度的话 */
.outer {
justify-content: space-between;
}
④ 左右浮动，中间BFC
和第一个浮动方案一样，改 html 结构，middle 在 left 和 right 下方才能实现
⑤ table/grid 布局
和“左边固定，右边自适应”的写法几乎一模一样
/* table */
.outer{
display: table;
width:100%; /* 注意：要给父级 width：100% 否则元素按照内容大小撑开 */
}
.left, .right, .middle {
display:table-cell;
}
/* grid */
.outer{
display: grid;
grid-template-columns: 200px auto 200px; /* 左边固定格子宽度 */
}
⑥ calc() 计算属性：三个浮动
.left, .right, .middle{
float: left;
}
.middle{
width: calc(100% - 400px);
}