CSS常见的布局方式，限时福利

CSS 提供了多种方式来进行页面布局，以下是一些常见的布局方式：

1. 浮动布局（Float）
2. Flex 布局（Flexible Box）
3. Grid 布局（Grid）
4. 表格布局（Table）
5. 定位布局（Position）

浮动布局（Float）

.float-left {
  float: left;
}
 
.float-right {
  float: right;
}

<div class="float-left">左边内容</div>
<div class="float-right">右边内容</div>

Flex 布局（Flexible Box）

.flex-container {
  display: flex;
}
 
.flex-item {
  flex: 1; /* 可以根据需要分配空间 */
}

<div class="flex-container">
  <div class="flex-item">项目 1</div>
  <div class="flex-item">项目 2</div>
  <div class="flex-item">项目 3</div>
</div>

Grid 布局（Grid）

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; /* 定义三列 */
}

<div class="grid-container">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

表格布局（Table）

.table-layout {
  display: table;
  width: 100%;
}
 
.table-cell {
  display: table-cell;
  padding: 10px;
}

<div class="table-layout">
  <div class="table-cell">单元格 1</div>
  <div class="table-cell">单元格 2</div>
  <div class="table-cell">单元格 3</div>
</div>

定位布局（Position）

.absolute-position {
  position: absolute;
  top: 10px;
  left: 10px;
}

<div class="absolute-position">绝对定位内容</div>

以上代码展示了如何使用不同的CSS技术进行布局。在实际应用中，你可以根据具体需求选择最适合的布局方式。