html浮动三栏布局,用CSS的float创建三栏布局的三种方式

使用CSS的float属性可以创建三栏布局，常见的三种方式如下：

### 1. 左右浮动 + 中间margin

<div class="container">
  <div class="left">左侧栏</div>
  <div class="middle">中间栏</div>
  <div class="right">右侧栏</div>
</div>

.left {
  float: left;
  width: 200px;
}

.middle {
  margin: 0 220px;
}

.right {
  float: right;
  width: 200px;
}

### 2. 左右浮动 + 中间绝对定位

<div class="container">
  <div class="left">左侧栏</div>
  <div class="middle">中间栏</div>
  <div class="right">右侧栏</div>
</div>

.container {
  position: relative;
}

.left {
  float: left;
  width: 200px;
}

.middle {
  position: absolute;
  left: 200px;
  right: 200px;
}

.right {
  float: right;
  width: 200px;
}

### 3. 左浮动 + 右浮动 + 中间margin

<div class="container">
  <div class="left">左侧栏</div>
  <div class="middle">中间栏</div>
  <div class="right">右侧栏</div>
</div>

.left {
  float: left;
  width: 200px;
}

.middle {
  margin: 0 220px;
}

.right {
  float: right;
  width: 200px;
}

.container:before,
.container:after {
  content: "";
  display: table;
  clear: both;
}

以上三种方式都可以实现三栏布局，具体选择哪种方式要根据实际情况而定。