float 布局

HTML

<body>
<article class="main">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="center">中</div>
</article>
</body>

CSS

*{margin:0;padding:0;}
.left{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    float: right;
    width: 100px;
    height: 100px;
    background: green;
}
.center{
    margin-left: 100px;
    margin-right: 100px;
    background-color: gray;
}
.main::after{
    content:'';
    display: block;
    clear: both;
}

Position布局

HTML

<body>
<article class="main">
        <div class="left">左</div>
        <div class="center">中</div>
        <div class="right">右</div>
</article>
</body>

CSS

*{margin:0;padding:0;}
.left{
    position: absolute;
    left: 0;
    width: 100px;
    background-color: red;
}
.right{
    position: absolute;
    right: 0;
    width: 100px;
    background-color: green;
}
.center{
    position: absolute;
    left: 100px;
    right: 100px;
    background-color: gray;
}

flex 布局

HTML

<body>
<article class="main">
        <div class="left">左</div>
        <div class="center">中</div>  
        <div class="right">右</div>        
</article>
</body>

CSS

*{margin:0;padding:0;}
.main {
    display: flex;
}
.left{
    width: 100px;
    background: red;
}
.center{
    flex:1;
    background: gray;
}
.right{
    background: green;
    width: 100px;
}

CSS实现三栏布局

float 布局

Position布局

flex 布局