【CSS布局】实现中间自适应，左右宽度固定的三栏布局

1. 绝对定位+margin：auto

1.1 思路

1. 为左右设置宽度，为左中右设置高度100%，给个背景颜色
2. 左中右设置absolute定位，左边设置left为0，右边设置right为0，中间设置left、right为左右的宽度
3. 由于中间需要自适应宽度，所以设置margin：auto

1.2 代码

 
left
main
right
 

1.3 效果

2. flex弹性布局

2.1 思路

1. 为父盒子设置flex属性
2. 给html、body、父盒子、左中右设置高度为100%，顺便给左中右设置一个颜色
3. 为左中右设置order属性，依次是1、2、3
4. 为左右设置flex属性为0 0 宽度，为中间设置flex为auto

2.2 代码

 
left
main
right
 

2.3 效果

3. 浮动

3.1 思路

1. 给html、body、父盒子、左中右设置高度为100%，顺便给左中右设置一个颜色
2. 左右盒子设置宽度，中间盒子宽度设置为100%（很重要）
3. 左盒子设置左浮动，右盒子设置右浮动

3.2 代码

 
left
main
right
 

3.3 效果