在现代布局方案出现之前，开发者主要依赖表格布局与浮动布局实现页面结构。这些技术在特定历史阶段解决了基础布局需求，但随着Web界面复杂度提升，其局限性日益凸显：
传统布局核心痛点

1. 结构与表现混淆：表格布局使用<table>标签实现页面结构，违背HTML语义化原则，导致代码维护困难且SEO不友好
2. 垂直对齐困难：需通过复杂margin/padding计算或表格单元格特性间接实现，在动态内容场景下易失效
3. 响应式适配繁琐：依赖媒体查询与百分比宽度，多设备适配时需编写大量冗余代码，维护成本高
4. 动态内容布局局限：内容高度变化易导致布局错乱，缺乏弹性调整能力，尤其在内容加载异步场景下问题突出

以浮动布局为例，虽然其通过float: left/right解决了元素并排问题，但会引发"高度塌陷"副作用——当父元素仅包含浮动子元素时，父元素高度会变为0，破坏页面整体布局流。而垂直居中这一基础需求，在传统技术体系下往往需要结合position: absolute与负margin等hack手段实现，代码可读性与稳定性极差。这些痛点共同推动了现代布局技术的发展，Flexbox与Grid等方案应运而生，从根本上改变了布局开发模式。

本章后续小节将逐一展开四大布局技术的原理与实践：3.1节解析浮动布局的使用场景及清除浮动方案，3.2节构建Flexbox的容器与项目属性体系，3.3节对比Grid的二维布局能力，3.4节详解定位技术的四种模式。通过四个典型案例（新闻列表图文混排、响应式导航栏、相册网格布局、悬浮广告）的实战实现，读者将掌握不同布局方案的适用边界，最终形成"场景驱动"的布局技术选型能力。