CSS布局

两栏布局

---

实现的方法：

    float + margin

<div class="left">定宽</div>
<div class="right">自适应</div>

        .left{
            width: 200px;
            height: 200px;
            float: left;
            background-color: coral;
        }
        .right{
            /*间距为20px*/
            margin-left: 220px;
            height: 200px;
            background: yellow;
        }

实现效果:

---

三列布局

---

1.左右两栏使用float属性，中间栏使用margin撑开

    <div class="left">左</div>
    <div class="right">右</div>
    <div class="middle">中</div>

.left{
    width: 100px; height: 200px; background: coral; float: left
}
.right{
    width: 100px; height: 200px; background: yellow; float: right
}
.middle{
    height: 200px; background: green; margin-left: 120px; margin-right: 120px;
}

缺点：当中间块的宽度小于左右宽度之和时，右侧栏会被挤下去；html结构不正确

---

2.左右两栏使用position定位，中间用margin

    <div class="left">左</div>
    <div class="middle">中</div>
    <div class="right">右</div>

.left{
    width: 200px;
    height: 200px;
    background: coral;
    position: absolute;
    top: 0;
    left: 0;
}
.middle{
    margin: 0 220px;
    height: 200px;
    background: green;
}
.right{
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    top: 0;
    right: 0;
}

缺点：当父元素有内外边距时，会导致中间栏位置有偏差（子元素绝对定位后，不收父元素的padding影响）

---

3.float和BFC配合圣杯布局


     将middle宽度设置为 100%，float设置为left，其中的content块设置margin；左栏设置float为left，设置margin为-100%；右栏设置为float:left，margin-left设置为自身大小

<div class="box">
    <div class="middle">
        <div class="content">
            中间
        </div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>

.box{
    /*清除浮动*/
    overflow: hidden;
}
.middle{
    /*宽度设置为100%*/
    width: 100%;
    float: left;
}
.middle .content{
    /*margin值为左右两栏的宽度*/
    margin: 0 120px;
    background: green;
}
.left{
    width: 120px;
    height: 300px;
    float: left;
    background: coral;
    /*设置margin-left为-100%后，左栏将上去*/
    margin-left: -100%;
}
.right{
    width: 120px;
    height: 300px;
    float: left;
    background: yellow;
    /*margin-left值设置为自己的宽度*/
    margin-left: -120px;
}

缺点：结果不正确(middle块应该在中间)；多了一层标签(.main）

---

1. flex布局

<div class="wrapper">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
</div>

.wrapper{
    display: flex;
}
.left{
    width: 200px;
    height: 200px;
    background: green;
}
.middle{
    width: 100%;
    background: coral;
}
.right{
    width: 200px;
    height: 200px;
    background: yellow;
}

缺点：兼容性