实现三栏布局的几种方法

方法一：左右两栏宽度固定，中间宽度为100%减去左右两栏的宽度，再利用浮动来实现从左到右的三栏布局。

html代码：

css代码：

缺点： 左右两栏的宽度发生变化，中间栏的宽度需要重新计算，否则会影响到整体布局。不能做到自适应。

方法二：利用BFC区域不会与浮动的容器发生重叠的特性来实现三栏布局。

html代码：

css代码：

注意：在书写html代码时，应先写左右并左右浮动，再写中间。

缺点：一般三栏布局中，center为主栏，但这种写法center栏在最后，如有大量重要的内容需要优先展示，这总写法center栏最后才能加载出来，会影响用户体验。

方法三：利用弹性盒子(Flex Box)进行三栏布局

 hml代码：

css代码：

注意：flex-grow 属性用于设置或检索弹性盒子的扩展比率，默认值为0。如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。