三栏布局(圣杯布局、双飞翼布局)

前言

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别

圣杯布局：为了让中间div内容不被遮挡，div设置浮动后, 将中间div设置了左右padding后，将左边的div设置相对定位position: relative配合right使用，然后左右两个div分别配合margin-left和margin-right使用，以便左右两栏div移动后不遮挡中间div。

双飞翼布局：也是让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置，div设置浮动后，将左右两个div分别配合margin-left使用，以便左右两栏div移动后不遮挡中间div。

需要注意的是：要给body设置一个最小的宽度min-width: 550px;