还有一个要求是“中间一栏长度改变时，父元素的高度始终为子元素中最高的高度”，这个之后总结，先分析布局。
看到这个任务，首先想到的就是双飞翼布局，之后有看其他人的代码，总结了一下：
一、position方式：
左、中、右顺序可以任意调整。左右设置绝对定位脱离文档流，再通过left、right、top 等属性进行定位，中间嵌套一个div，设置左右外
边距分别为左右部分的宽度，使得中间部分的内容不会被左右遮盖。
<style>
*{
margin:0;
padding:0;
}
.left,.right{
position:absolute; /*左右绝对定位、定高宽*/
height:200px;
width:200px;
}
.left{
background-color: red;
left:0;
}
.center{
min-height:200px;
background-color: yellow;
}
.content{
margin:0 200px; /*避免中间内容被遮盖*/
}
.right{
right:0;
top:0;
background-color: blue;
}
</style>
<body>
<div class="left"></div>
<div class="center">
<div class="content"></div>
</div>
<div class="right"></div>
</body>
二、float方式：
左、右分别浮动到左右，中间部分设置相应的左右外边距；
建议按照左、右、中顺序，因为只有左右设置的是浮动，如果把中放在右前面，就会先渲染中间部分，由于中间盒子div会占满一行，就会
导致浮动元素的位置不够，右边的盒子就会被挤到下一行；也可以按照左、中、右的顺序，可以把左中外面再套一层div，设置float:left；
width：100%；margin-right：-200px;（右边盒子的宽度）,这样右边的盒子不会被挤下去，而且可以先渲染中间的内容，具体情
况再选择吧。
<style>
*{
margin:0;
padding:0;
}
.left,.right{
height:200px;
width:200px;
}
.left{
background-color: red;
float:left;
}
.center{
min-height:200px;
margin:0 200px;
background-color: yellow;
}
.right{
float:right;
background-color: blue;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
三、负外边距方式：
（1）双飞翼布局：
按照中、左、右的顺序，三部分都左浮动，中间的宽度为100%，左右分别设置相应的负外边距（左：margin-left:-100%；
右：margin-left:-200px;)，中间嵌套一个div，设置左右外边距避免内容被遮盖。
（2）圣杯布局：
和双飞翼在布局上大致相同，都是左浮动、中间宽度为100%，左右设置相应负外边距，但由于中间的内容会被左、右两部分覆盖，
所以两种布局的不同点在于解决这个问题的方法不同。
圣杯布局先为中间部分设置内边距，左、右内边距分别为左右盒子的宽度，把内容拉回到中间最终需要自适应的部分，由于设置的
是内边距，左右两部分也会跟着过来，再通过相对定位使左边盒子相对向左偏移，使右边盒子相对向右偏移，这样左右两部分就不会遮
挡住中间的内容了。
（3）其他布局：
上面两种都是按照中、左、右的顺序，其实左、中、右或者左、右、中顺序都可以，只要中间宽度为100%，再设置浮动以及相应
的负外边距。
注意：中间部分内容遮盖问题以及左右盒子有可能会被中间遮盖，只要设置被遮住部分的position：relative和z-index：999，让它
保持在最前即可。
如何选择布局方式？主要内容放在前面先渲染。