就成主力。左边一栏，右边一栏，或者搞个三栏布局，基本上都靠`float: left;`或者`float: right;`。这玩意儿确实比表格灵活多，代码也干净不少。
`写上`clear: both;`，或者用伪元素`:after`来清除。当时为搞定各种浏览器下的浮动兼容性问题，真是没少折腾。还有
定位`position`，像`absolute`绝对定位，`relative`相对定位，偶尔也用，主要用来搞一些需要精确控制位置的小模块，或者弹出层之类的。
这个阶段，还接触到一个叫静态布局的概念，就是宽度啥的都用像素`px`写死。屏幕大的看着两边留白多，屏幕小的可能就出滚动条。那时候手机上网还不普遍，主要对付电脑屏幕，问题还不算太大。
现代布局：弹性盒子和网格
然后，大概是移动互联网起来之后，屏幕尺寸五花八门，之前的固定宽度或者纯靠浮动就不太行。这时候接触到流式布局，就是宽度用百分比`%`，让页面能随着浏览器窗口大小变化。但这还不够，图片、文字大小啥的也得跟着变才协调。
真正的解放，我觉得是从弹性盒子`Flexbox`开始的。第一次用的时候，感觉简直打开新世界的大门！垂直居中，以前要写一堆hack代码，用Flexbox就一行`align-items: center;`搞定。还有项目的排列、对齐、空间分配，都变得特别简单直观。尤其做那种一维的列表或者导航条，用Flexbox简直不要太爽。
Flexbox主要解决一维布局问题，那二维的？比如像杂志、报纸那样复杂的网格结构？这时候就轮到网格布局`Grid`出场。Grid可以让你同时控制行和列，把页面划分成一个个格子，然后把内容填进去。做那种不规则的、复杂的页面结构，Grid比Flexbox更强大、更方便。我试过用它来搭整个页面的骨架，确实比以前用浮动或者定位要清晰、稳固得多。
现在基本上做新项目，我都是优先考虑Flexbox和Grid。根据具体情况，有时候是Flex为主，有时候是Grid为主，有时候两者结合着用。比如整体页面结构用Grid划分区域，区域内部的小模块排列用Flexbox。
关于布局模式的思考
后来也看一些文章，提到什么F型布局、Z型布局，还有卡片式、分屏式啥的。我觉得这些更多是从用户视觉习惯或者内容组织形式上总结出来的模式。比如我们习惯从左到右，从上到下阅读，重要的信息放左上角，这有点像字母F。技术上实现这些模式，还是得靠前面说的那些CSS方法，比如浮动、定位、Flexbox、Grid。
像那个全屏大图的布局，也很常见，特别适合做展示型网站的首页，视觉冲击力强。技术上可能就是用背景图，或者一个绝对定位的大`![]()
`，然后把文字、菜单叠加上去。
还有提到的自适应布局和响应式布局。我理解自适应可能更侧重于在几个关键的屏幕尺寸断点上调整布局（比如用媒体查询`@media`），而响应式则更强调布局的流动性和弹性，能在各种尺寸下都表现良现在用Flexbox和Grid，实现响应式布局比以前容易太多。
网页布局这块，我是从最原始的表格，一路折腾过来，经历浮动的混乱，到现在主要依赖Flexbox和Grid。感觉技术一直在进步，以前觉得很难搞的效果，现在可能几行代码就解决。但不管用什么方法，关键还是得理解背后的原理，然后多动手实践，才能真正掌握。
- 上一篇
- 建筑工程公司都有哪些业务？经营范围深度解析
- 下一篇
- 暂无
