两栏布局与三栏布局的几种方式

一、两栏布局

左侧（a）宽度固定，右侧（b）自适应

1、a浮动，定宽高；b定高，并添加margin-left值为a的宽度；// 子元素默认占比100%

2、ab全浮动，a定宽高，b定高，并且b的宽度使用css计算属性calc（100% - a的宽度）；

3、都是用绝对布局，b的left值为a的宽度；

4、使用display：flex布局，a定宽，b使用flex：1自适应剩余宽度；

二、三栏布局

左（a）右（c）固定，中间（b）宽度自适应

1、a和c宽高固定，b使用margin-left：a的宽度和margin-right：b的宽度；

2、a和c浮动，b使用overflow：hidden；（利用了bfc原理）

3、圣杯布局和双飞翼布局；