css布局方式

CSS 提供了多种布局方式，以下是一些常用的布局方法及其简单示例：

1. 浮动布局（Float）

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

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

2. 块状布局（Block）

.block { display: block; }

<div class="block">块状内容</div>

3. 行内块状布局（Inline-block）

.inline-block { display: inline-block; }

<div class="inline-block">行内块状内容</div>

4. 弹性布局（Flexbox）

.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>

5. 网格布局（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>

6. 绝对定位布局

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

<div class="positioned">绝对定位内容</div>

7. 相对定位布局

.positioned { position: relative; top: 5px; left: 5px; }

<div class="positioned">相对定位内容</div>

8. 列布局（Column）

.column { columns: 3; }

<div class="column">
  多列文本内容多列文本内容多列文本内容多列文本内容
</div>

选择哪种布局方式取决于您的具体需求，例如是否需要响应式设计、是否需要处理复杂的布局、是否需要兼容旧浏览器等。每种布局方式都有其优点和适用场景。