用CSS floats创建三栏页布局

使用 CSS floats 可以轻松地创建三栏页布局。三栏页布局通常包括一个固定宽度的中间列和两个侧边列，其中两个侧边列可以是固定宽度或可变宽度的。

下面是示例代码，提供了两种实现三栏布局的方法：

方法一

HTML:

<div class="container">
    <div class="col-1"></div>
    <div class="col-2"></div>
    <div class="col-3"></div>
</div>

CSS:

.container{
    width: 100%;
    overflow: hidden;
}

.col-1{
    float: left;
    width: 25%;
    height: 300px;
    background-color: red;
}

.col-2{
    float: left;
    width: 50%;
    height: 300px;
    background-color: yellow;
}

.col-3{
    float: left;
    width: 25%;
    height: 300px;
    background-color: green;
}

在这个设计中，我们使用了一个包含三个列的父容器，并对每个列使用 float 属性。

.col-1 和 .col-3 采用了相同的长度，都是 25%，来达到一个相同大小的两个侧边列。中间一列是 50% 的宽度，可以是可变宽度的或固定宽度的。容器采用了 overflow: hidden; 来保证容器可以自适应高度。

方法二

HTML:

<div class="container">
    <div class="col col-1"></div>
    <div class="col col-2"></div>
    <div class="col col-3"></div>
</div>

CSS:

.container{
    width: 100%;
    overflow: hidden;
}

.col{
    box-sizing: border-box;
    height: 300px;
    padding: 20px;
}

.col-1{
    width: 25%;
    float: left;
    background-color: red;
}

.col-2{
    width: 50%;
    margin: 0 25%;
    background-color: yellow;
}

.col-3{
    width: 25%;
    float: right;
    background-color: green;
}

在这个设计中，我们使用了一个包含三个列的父容器，并对每个列使用 float 属性。

.col-1 和 .col-3 采用了相同的长度，都是 25%，来达到一个相同大小的两个侧边列。中间一列是 50% 的宽度，可以是可变宽度的或固定宽度的。容器采用了 overflow: hidden; 来保证容器可以自适应高度。

此外，我们使用了 box-sizing: border-box; 来处理内边距问题。使用 margin: 0 25%; 可以令中间列保持在容器中心。float: left 和 float: right 属性用来控制侧边列的位置。

以上两种方法都可以创建一个具有三列的布局。使用 float 属性来控制布局，可以根据需要的效果，轻松地控制列的大小、顺序和位置。