一、浮动（Float）
概念
浮动是一种早期用于网页布局的技术，最初设计用于文字环绕图片的场景。通过设置 float: left 或 float: right，元素可以从正常文档流中脱离，浮动到父容器的一侧。
应用场景
- 文字环绕图片：博客或文章页面，图片周围文字排布流畅。
- 基本布局：早期用于实现简单的两栏或三栏布局。
实践
<div class="container">
<div class="left" style="float: left; width: 50%;">左侧内容</div>
<div class="right" style="float: right; width: 50%;">右侧内容</div>
</div>
需要注意的是，浮动元素可能影响后续文档流，因此常需要清除浮动：
.container::after {
content: "";
display: table;
clear: both;
}
局限性
浮动过于依赖后续的清除操作，不够直观，难以应对复杂布局需求。
二、定位（Positioning）
概念
CSS 定位可以让元素在页面中精确放置，其关键属性包括 position: static, relative, absolute, 和 fixed。
应用场景
- 导航栏固定：
fixed用于实现固定顶部或侧边栏。 - 模态框布局：
absolute实现模态框在页面中央定位。 - 装饰元素：
relative和absolute配合，用于小图标、背景图等。
实践
<div class="modal" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
模态框内容
</div>
三、弹性盒子（Flexbox）
概念
Flexbox 是 CSS3 引入的一种一维布局方式，适用于横向或纵向的灵活分配。其核心在于父容器属性（display: flex）和子元素的弹性设置。
应用场景
- 导航栏布局：水平菜单项均匀分布。
- 响应式设计：子元素根据屏幕宽度动态调整。
- 垂直居中：轻松实现任意内容的居中。
实践
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh;
}
<div class="container">
<div>内容1</div>
<div>内容2</div>
</div>
优点
- 灵活控制排列方向和间距。
- 简单易用，特别适合动态内容布局。
四、网格布局（Grid）
概念
Grid 布局是一种基于网格的二维布局系统，允许开发者通过定义行（rows）和列（columns）实现精确的页面设计。使用 display: grid 设置容器后，可以灵活地定义子元素的布局规则。
应用场景
- 复杂页面布局：比如头部、导航栏、内容区、侧边栏、页脚的整体布局。
- 图片画廊：图片自动排列，适应不同分辨率。
- 数据表格：动态生成的表格布局，支持灵活调整行列。
实践
.container {
display: grid;
grid-template-rows: 100px 1fr 50px; /* 定义三行：头部、内容区、底部 */
grid-template-columns: 200px 1fr; /* 定义两列：侧边栏、主要内容 */
gap: 10px; /* 行列之间的间距 */
height: 100vh;
}
.header {
grid-column: 1 / 3; /* 跨越两列 */
grid-row: 1; /* 定义在第一行 */
}
.sidebar {
grid-column: 1; /* 定义在第一列 */
grid-row: 2; /* 定义在第二行 */
}
.main {
grid-column: 2; /* 定义在第二列 */
grid-row: 2; /* 定义在第二行 */
}
.footer {
grid-column: 1 / 3; /* 跨越两列 */
grid-row: 3; /* 定义在第三行 */
}
复制
HTML 结构：
<div class="container">
<div class="header">头部</div>
<div class="sidebar">侧边栏</div>
<div class="main">主要内容</div>
<div class="footer">底部</div>
</div>
复制
优点
- 精准控制：通过定义行和列，适合复杂布局。
- 响应式设计：结合
minmax()和fr单位，轻松实现响应式设计。 - 简化代码：复杂布局的代码可读性更高。
