前言最近有朋友向我抱怨说，面试时突然被问到如何实现布局和原理，他有点懵。之前JavaScript部分回答的还不错，这里翻过来了。完全没思路，后面面试的状态一落千丈。结局如他所料，他没有被录取。给这位朋友一个答复后，我就回家整理了这篇文章。希望其他小伙伴在面试中被问及圣杯的布局时，能够冷静的回答。本文将介绍经典布局——圣杯布局的原理和两种实现方式：floating和flex。什么是圣杯布局？圣杯布局就是讨论“三栏式液体布局”的实现。最早的完美实现是MatthewLevine在2006年写的一篇文章《In Search of the Holy Grail》，主要描述了网页中最佳圣杯的实现方法。它有以下要求：上部（页眉）和下部（页脚）各自占据屏幕的整个宽度。上下部分之间的部分（容器）是三列布局。三栏式布局两侧宽度不变，中间部分自动填满整个区域。中段的高度是三列最高区域的高度。接下来介绍两种实现方法。它们最终的效果是一样的，如下图所示：实现方式一：先浮动代码：header
