🚀 css常用的布局方式有哪些

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

1. Flexbox（弹性盒子） —— 单轴布局首选

✅ 适用：一维布局（水平 or 垂直），如导航栏、卡片列表、居中对齐、响应式组件

2. Grid（网格布局） —— 二维布局的强大工具

✅ 适用：一维布局（水平 or 垂直），如导航栏、卡片列表、居中对齐、响应式组件

3. Positioning（定位布局） —— 精确定位利器

✅ 适用：层叠/脱离文档流场景，如弹窗、Tooltip、固定头部、图标覆盖

1. … static：默认，无定位
2. … relative：相对定位 微调位置、为 absolute 子元素提供定位上下文
3. … absolute：绝对定位 下拉菜单、模态框
4. … fixed：固定定位 固定导航栏、返回顶部按钮
5. … sticky： 滚动到阈值后变 fixed 粘性定位 表头固定、侧边目录锚定

4. Float + Clear（浮动布局） —— 传统方案，渐淘汰

✅ 适用：简单布局，如文本环绕、图片排版

5. Multi-column Layout（多栏布局） —— 报纸式布局

✅ 适用：报纸式文本分栏（新闻、博客）❌ 仅适合文本，不适合结构化布局❌ 跨栏元素控制困难

        
            .article {
              column-count: 3;
              column-gap: 2rem;
              column-rule: 1px solid #ccc;
            }