三栏左右中间自适应布局常见方式

圣杯布局

总的布局为中左右。左右盒子定宽，中间100%，左盒子margin-left为-100%，右盒子margin-left为-宽度。

<div class="all">
        <div class="main">456中间</div>
        <div class="left">123左</div>
        <div class="right">789右</div>
    </div>

这个布局的样式

.all {
            padding: 0 200px;
        }

        .main,
        .left,
        .right {
            position: relative;
            float: left;
            height: 100px;
        }

        .main {
            width: 100%;
            background-color: pink;
        }

        .left {
            width: 200px;
            margin-left: -100%;
            background-color: red;
            left: -200px;
        }

        .right {
            width: 200px;
            margin-left: -200px;
            background-color: red;
            right: -200px;
        }

最后实现的效果

双飞翼布局

其实前面的布局都是跟圣杯差不多，二者唯一的差别在于对中间盒子内容被遮挡的处理。双飞翼布局的处理方法是在给中间的盒子包一个盒子，通过设置中间盒子的margin值来实现的。

 <div class="container">
        <div class="main">
            <div class="content">456</div>
        </div>
        <div class="left">123</div>
        <div class="right">789</div>
    </div>

.main,
        .left,
        .right {
            position: relative;
            float: left;
        }

        .main {
            width: 100%;
            background-color: pink;
        }

        .left {
            width: 200px;
            background-color: skyblue;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            background-color: skyblue;
            margin-left: -200px;
        }

        .content {
            margin: 0 200px;
        }

绝对定位

通过绝对定位的方式让左右两个盒子都定位在整个父盒子的左边和右边，中间盒子不做宽度设置，剩余的中间盒子宽度自适应。（子绝父相）

.container {
            position: relative;
        }

        .left {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            background-color: skyblue;
        }

        .right {
            position: absolute;
            right: 0;
            top: 0;
            width: 200px;
            background-color: skyblue;
        }

        .main {
            background-color: pink;
            margin: 0 200px;
            /* overflow: hidden; */
        }

flex布局（这种布局左右不定宽即可）

这个布局就相对来说简单很多了，就是给三个盒子的父亲设置display：flex这个属性，然后让中间的盒子flex：1 OK！完成！代码奉上：

<div class="parent">
        <div class="child1">123</div>
        <div class="child2">456</div>
        <div class="child3">789</div>
    </div>

 		.parent {
            display: flex;
        }
        .child1 {
            background-color: pink;
        }

        .child2 {
        	flex:1;
            background-color: skyblue;
        }

        .child3 {
            background-color: pink;
        }

通过触发BFC，左右不定宽，中间自适应

		.parent {
            position: relative;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;

        }

        .child1 {
            float: left;
            background-color: skyblue;
        }

        .child2 {
            background-color: pink;
        }

        .child3 {
            position: absolute;
            right: 0;
            top: 0;
            background-color: skyblue;
        }

<div class="parent clearfix">
        <div class="child1">123</div>
        <div class="child2">456</div>
        <div class="child3">789</div>
    </div>