圣杯布局，双飞翼布局

圣杯布局和双飞翼布局都是实现三栏布局的方法，设置子元素元素浮动，左右定宽，中间自适应，是很常见的布局，其原理差不多，都有负边距的应用

圣杯布局

圣杯布局是给三列的父元素（content），加上 左 margin 和 右 margin（或者 padding），将三列挤到中间来，这样左边和右边就会预留出位置，再把两边浮动元素的通过负边距进行位置填充

双飞翼布局

双飞翼布局是给中间元素的 main 里又插入一个 div，通过调整内部 div 的 margin 值，实现中间栏自适应，内容写到内部 div 中，再把两边浮动元素的通过负边距进行位置填充。

这是 10 年前两栏和三栏的布局，是没有 flex 和 grid 布局的无奈之举，现在早就过时不用了，我一般使用 flex，个人项目使用 grid

总结圣杯布局，双飞翼布局写了篇博客，博客地址：https://www.jianshu.com/p/f4653c6b49b9

参考文章： CSS 布局写篇博客