多列布局-优快云博客

本文介绍了一种实现两列定宽布局的方法，通过浮动元素并利用clearfix清除浮动影响，确保页面结构正确显示。同时介绍了如何创建一个包含定宽主区域与侧边栏的简单网页示例。

两列定宽

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>两列布局</title>
    <style type="text/css">
    html,body,.body,.main,.side{
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .body{
        width: 960px;
        margin: 0 auto;
    }

    .main{
        background-color: pink;
    }
    .side{
        background-color: #bebebe;
    }

    
    .main{
        float: left;
        width: 660px;

    }
    .side{
        float: right;
        width: 300px;

    }

    

    .clearfix:after{
        content: '.';
        display: block;
        clear: both;
        height: 0;
        overflow: hidden;
        visibility: hidden;
    }
    </style>
</head>
<body>
<div class="body clearfix">
    <div class="side">side</div>
    <div class="main">main</div>
</div>
</body>
</html>