HTML基础教程（二十四）网站布局之有用的提示：别让你的HTML在浏览器里“流浪地球”！资深码农的布局防尬指南

第一章：布局的“史前时代”与“文艺复兴”

曾几何时，互联网的荒野上，一群早期的“开拓者”们发现了一个万能工具——<table>标签。它本是用来展示数据的表格，却阴差阳错地成为了整个网页布局的基石。

“嘿，老兄，你看！用<tr>和<td>拼拼凑凑，居然能做出三栏布局！”于是，整个互联网变成了一个巨大的、嵌套无数层的表格迷宫。这就像用瑞士军刀去盖房子，虽然勉强能立起来，但代码臃肿、加载缓慢、维护起来更是噩梦级别的——改一个像素，可能整个“大楼”都塌了。搜索引擎看着这些毫无语义的代码，也是一脸懵逼，根本看不懂你的内容结构。

这就是布局的“石器时代”，我们称之为 “Table布局の黑暗森林” 法则。

时光飞逝，CSS的崛起带来了“文艺复兴”。我们迎来了DIV+CSS的圣光。<div>这个“没有感情的容器”配合CSS，实现了结构与样式的分离。我们学会了用float让元素浮动，用position给元素精确定位。

但这片新大陆也充满了陷阱：

• float的诅咒：你让一个元素float: left;，就得时刻记得它的父级要clearfix，不然布局就会“高度坍塌”，像被抽掉底的积木。这仿佛是CSS对你施加的一种魔法反噬。
• position: absolute;的孤岛：当你把元素绝对定位，它就脱离了文档流，成为了一个“宇宙浮萍”，你需要用top, left等属性手动微调它的坐标，稍有不慎，它就可能消失在屏幕之外或者与其它元素上演“叠罗汉”的戏码。

这个时代，我们像中世纪的工匠，依靠float和position这两样基础工具，精雕细琢，虽然能创造出复杂的布局，但始终伴随着Hack和调试的辛酸泪。我们称之为 “Float悬浮与Position定位の荆棘王冠”。

第二章：现代布局的“双雄降临”：Flexbox与Grid