CSS —— 圣杯、双飞翼布局实现原理

一、圣杯布局

1、什么是圣杯布局

如下图，圣杯布局就是左右两个div宽度固定，中间div自适应的三栏布局。

2、文档结构

<div class="container">
        <div class="center">  center center center center center center center center  </div>
        <div class="left"> left left left left left left left left </div>
        <div class="right"> right right right right </div>
  </div>

3、目的

把中间栏放在文档流前面，以优先渲染。

4、实现原理

① 给left、center、right三个div都设置左浮动float:left，由于中间栏需要自适应，因此
要给center宽度设置为100%，此时三个div的排列如下（顺序为cent