css-经典三栏布局

学了前端这么久，还从未认真研究过布局，一直都是自己设计或者模仿着别人的网页。这次在网上看了多个博客，文章。

了解常见的三栏布局，所谓三栏布局，无非就是左，中，右三栏水平排列。

在这里的总结主要以代码的形式表示出来，还有一些我看到的讲解比较好的博客链接：

float布局

左右两边固定，中间自适应。

.left{
    width: 100px;
    height: 200px;
    background-color: yellow;
    float: left;
}
.right{
    width: 100px;
    height: 200px;
    background-color: pink;
    float: right;
}
.center{
     background-color: red;
     height: 200px;
     margin-left: 120px;  // 据左边右边框的距离 整个元素的大小是整个box的宽度
     margin-right: 120px;
}

    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>

这里写图片描述
对于设置float的元素，会脱离文档流，center盒子会无视这个元素，整个元素的大小会包括浮动的区域即撑满整个box。（但center盒子内的文本会为这个元素让位，使其环绕在浮动元素的周围）
缺点：中间部分最后加载，内容较多时影响体验

BFC规则

BFC不会和浮动元素重叠，将center设置为BFC可以使其宽度变为自适应的宽度。

.center{
     background-color: red;
     height: 200px;
     margin-left: 120px;  
     margin-right: 120px;
     overflow: hidden;
}

加上overflow: hidden;显示结果和上面一样。

圣杯布局

在页面的显示效果：左右两边固定宽度，中间容器自适应（根据容器大小自适应）。

实现：左、中、右三栏都通过float进行浮动，然后通过负值margin将左右栏进行调整。最外层设置margin使得中间栏内容不被覆盖。

（在实际开发中常用来做功能区域的划分。左边是一个导航菜单，右边是广告或者文章的列表，中间是主要的内容显示区域。）

body{
    min-width: 640px; /* 2*220px+200px ？*/
}
.box{
    padding: 0 220px 0 200px;  //！！
}
.middle{
    width: 100%;
    height: 200px;
    float: left;
    background-color: red;
}
.left{
    width: 200px;
    height: 200px;
    float: left;
    margin-left: -100%;
    position: relative;  //！
    left: -200px;  //！
    background-color: yellow;
}
.right{
    width: 220px;
    height: 200px;
    float: left;
    margin-left:-220px;
    position: relative;
    right: -220px;
    background-color: pink;
}

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

若有什么不明白的可以参照一下链接，有详细的讲解：

* 关于圣杯布局-作者DotHide
* 简书-经典的圣杯布局

双飞翼布局

实现效果和圣杯模式相同，只是解决中间栏被遮挡问题的方式不同。

既然中间栏部分的内容会被遮挡，那么就在中间内部再加一个div，通过设置其margin来避开部分遮挡。

body{
    min-width: 640px; /* 2*220px+200px */
}
.middle{
    width: 100%;
    float: left;    
}
.box-inner{
    margin-left: 200px; //！
    margin-right: 220px;  //！
    height: 200px;
    background-color: red;
}
.middle::after {  //？middle后面要清除浮动
        display: block;
        content: '';
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
}
.left{
    width: 200px;
    height: 200px;
    float: left;
    margin-left: -100%;
    background-color: yellow;
}
.right{
    width: 220px;
    height: 200px;
    float: left;
    margin-left:-220px;
    background-color: pink;
}

<div class="box">
        <div class="middle">
            <div class="box-inner">
            愿你半生出走，归来认识少年。不忘初心，方得始终。    
            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

未处理中间栏的遮挡问题：
这里写图片描述
处理后的显示结果：

下面这篇文章详细介绍了圣杯布局 & 双飞翼布局两者之间的区别：

* CSS布局 – 圣杯布局 & 双飞翼布局

flex布局

flex布局现在受到越来越多前端人员的喜爱，所以熟练掌握flex布局非常重要，在这里我也有之前所总结的【css-flex布局】，不了解此布局的小伙伴可以先看一下。

flex: flex-grow flex-shrink flex-basis;

.box{
    display:flex;
}
.middle{
    height: 200px;
    background-color: red;
    flex-grow: 1;  /*沾满剩余空间*/
}
.left{
    height: 200px;
    order:-1;  /*将left放在最前面*/
    background-color: yellow;
    flex:0 1 200px;
}
.right{
    height: 200px;
    background-color: pink;
    flex:0 1 200px;
}

<body>
    <div class="box">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

* 深入理解css3中的flex-grow、flex-shrink、flex-basis

绝对定位

<style type="text/css">
        .middle {
            position: absolute;
            left: 200px;
            right: 200px;
            height: 200px;
            background-color: red;
        }

        .left {
            position: absolute;
            left: 0px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }

        .right {
            position: absolute;
            right: 0px;
            width: 200px;
            background-color: pink;
            height: 200px;
        }
    </style>
</head>

<body>
    <p class="box">
        <p class="middle">
            愿你半生出走，归来认识少年。不忘初心，方得始终。
        </p>
        <p class="left"></p>
        <p class="right"></p>
    </p>
</body>