末日潮汐

起初，网页布局遵循自然的流动（即元素一个接一个地排列，无休止地延续）。这就像把人类抵抗军排成一条长长的单列队伍。虽然勉强可用，但既不美观也不高效，在宽屏设备上可读性极差。

灾难性的表格时代

随后出现了表格。它们在内容布局方面有了显著进步，借助一些软件工具自动生成复杂的代码后，还能构建出有趣且生动的页面布局。表格能精确到像素级别，跨浏览器兼容性也很好。然而，即使只有少数几种屏幕尺寸，它们也因缺乏灵活性而显得力不从心。你可能让页面在某一尺寸下看起来完美，但当访问者的屏幕尺寸不同时，页面可能过小或更糟——过大。在没有现代响应式技术的情况下，过大的页面意味着需要大量滚动才能找到所需内容。此外，表格无法将样式与内容分离。理论上，保持内容与样式分离，意味着可以使用相同的 HTML 代码，仅通过修改样式来改变页面外观。而一旦布局嵌入 HTML 中，每次想要调整布局时都必须重写 HTML。

灾难性的浮动与定位

接着迎来了 CSS。布局主要依靠两个属性：浮动（float）和定位（position）。两者各有优缺点，在响应式设计环境下，其缺点暴露得尤为明显。浮动适合实现两栏布局，但难以构建更复杂的结构，维护起来尤其困难，尤其是在需要适配多种屏幕尺寸时。定位虽然能精准控制内容的位置，但过于僵硬，难以适应当今网页设计师和开发者所面对的多屏幕生态。在复杂的响应式布局中，它显得过于死板。尽管仍可使用，但在手机、平板和桌面设备之间切换时，调整极为困难。

革命性的列、弹性盒（Flexbox）与网格（Grid）

无论是浮动还是定位，都难以轻松实现居中布局，尤其是垂直居中。因此，负责制定 CSS 规范的人类抵抗神明们推出了新的布局方式。首先是 CSS 列（columns），随后是 Flexbox，最后是 Grid。这三种工具都极其强大，可用于创建复杂的布局，甚至可以组合使用。每种方法都有其优势和局限，需要根据具体场景权衡选择。
正如棒球棍击退游荡的僵尸，或空袭摧毁逼近的敌群，选对工具，你的后末日生活将更加长久且愉悦。接下来，我们来看看这些布局方法之间的对比。