使用浮动与定位实现经典三列布局

一些代码解释我会写在代码的注释中，不会继续在代码外作过多的解释，请注意代码中的注释！

使用浮动完成

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化所有样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 先为页眉与页脚设置宽高背景颜色与外间距 */
        .header,
        .footer {
            height: 30px;
            background-color: powderblue;
            width: 100%;
            margin: auto;
        }
        /* 给中间主体区域创建一个容器包裹起来预防高度坍塌 */
        /* 这里的min-height指的是最小高度 */
        .container {
            width: 1000px;
            min-height: 600px;
            margin: 10px auto;
            overflow: auto;
        }
        /* 为主体的左侧设置样式，并且向左漂浮 */
        .container>.left {
            width: 200px;
            min-height: 600px;
            background-color: skyblue;
            float: left;
        }
        /* 为主体的右侧设置向右漂浮与样式 */
        .container>.right {
            width: 200px;
            min-height: 600px;
            background-color: skyblue;
            float: right;
        }
        /* 为中间的内容区设置漂浮，向左向右其实都行，但是要记住，需要计算好主体区的宽度，要把padding也给算进去，否则会把布局弄乱。三列布局的主体区域除特殊情况外无法设置自适应与最小宽度，否则会自动铺满页面，也就是宽等于百分百 。为了美观在为其添加左右外间距*/
        .container>.conter {
            float: left;
            width: 580px;
            min-height: 600px;
            margin: 0 10px;
            background-color: springgreen;
        }
    </style>
</head>
<body>
    <!-- 一列眉，一列主体，一列页脚。主体中分为左侧，右侧与中间的内容区。 -->
    <!-- 这里是页眉 -->
    <div class="header"></div>
    <!-- 主体 -->
    <div class="container">
        <div class="left"></div>
        <div class="conter"></div>
        <div class="right"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
    </div>
</body>
</html>

效果如如下：

使用绝对定位来完成经典三列布局

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始化所有样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .header,
        .footer {
            height: 30px;
            background-color: powderblue;
            width: 100%;
            margin: auto;
        }
        /* 首先添加定位父级 */
        .container {
            width: 1000px;
            min-height: 600px;
            margin: 10px auto;
            position: relative;
        }
        /* 为左侧的区域添加绝对定位，并且设置距离左和上的间距设置为0将其固定在左侧 */
        .container>.left {
            width: 200px;
            min-height: 600px;
            background-color: skyblue;
            position: absolute;
            left: 0;
            top: 0;
        }
        /* 为右侧的区域添加绝对定位，并且设置距离右和上的间距设置为0将其固定在右侧 */
        .container>.right {
            width: 200px;
            min-height: 600px;
            background-color: skyblue;
            position: absolute;
            right: 0;
            top: 0;
        }
        /* 将中间的内容区设置一个绝对定位，因为左侧的区域的宽度为200px；为了显示到中央所以我们的left不能设置为0，将left设置为200px，top还是为0。内容区将会居中 */
        .container>.conter {
            width: 580px;
            min-height: 600px;
            margin: 0 10px;
            background-color: springgreen;
            position: absolute;
            top: 0;
            left: 200px;
        }
    </style>
</head>
<body>
    <!-- 一列眉，一列主体，一列页脚。主体中分为左侧，右侧与中间的内容区。 -->
    <!-- 这里是页眉 -->
    <div class="header"></div>
    <!-- 主体 -->
    <div class="container">
        <div class="left"></div>
        <div class="conter"></div>
        <div class="right"></div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
    </div>
</body>
</html>