二栏布局以及三栏布局

二栏布局

1、利用 calc 计算宽度的方法。

.left {
        float: left;
        height: 50px;
        width: 200px;
        background-color: red;
}
.right {
        height: 50px;
        width: calc(100%-200px);
        background-color: blue;
 }
<div class="contain">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>

2、利用 float 配合 margin 实现。

.left {
    float: left;
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    margin-left: 200px;
    background-color: blue;
}
<div class="contain">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>

3、利用 float 配合 overflow 实现。

.left {
    float: left;
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    background-color: blue;
    overflow: hidden;
}
<div class="contain">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>

4、利用flex实现。

.contain{
    display: flex;
}
.left {
    height: 50px;
    width: 200px;
    background-color: red;
}
.right {
    height: 50px;
    width: 100%;
    background-color: blue;
}
<div class="contain">
<div class="left">左侧定宽</div>
<div class="right">右侧自适应</div>
</div>

三栏布局

1、float-margin方法。

缺点：由于DOM结构限制左-右-中，主要内容无法最先加载。高度中间高度超出且没有margin的情况下会出问题(文字环绕)：解决方案为清除浮动或创建BFC(实质也是清除浮动)。

.left {
    float: left;
    height: 200px;
    width: 200px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
}
.main {
    margin-left: 200px;
    margin-right: 200px;
    height: 200px;
    background-color: green;
}
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

2、BFC规则

.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}

.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}

.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

3. 圣杯布局

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
    /*如果container没有margin-left就不用设置以下内容*/
    position: relative;
    left: -100px;
}
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    background-color: yellow;
    /*如果container没有margin-right就不用设置以下内容*/
    position: relative;
    right: -100px;
}
.main {
    float: left;
    width: 100%;
    height: 200px;
    background-color: blue;
}
.container{
    margin-left: 100px;
    margin-right: 100px;
}
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

4. 双飞翼布局

.main {
    float: left;
    height: 200px;
    width: 100%;
    background-color: yellow;
}
.content {
    height: 200px;
    margin-left: 110px;
    margin-right: 220px;
    background-color: green;
}
.left {
    float: left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 100px;
    height: 200px;
    float: left;
    margin-left: -200px;
    background-color: blue;
}
<div class="container">
    <div class="main">
        <div class ="container"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

5、flex布局

.container{
    display: flex;
}
.main {
    height: 200px;
    width: 100%;
    background-color: yellow;
}
.left {
    height: 200px;
    order: -1;
    width: 100px;
    background-color: red;
}
.right {
    width: 100px;
    height: 200px;
    background-color: blue;
}
<div class="container">
    <div class ="main">111</div>
    <div class="left"></div>
    <div class="right"></div>
</div>