三栏布局

一、流式布局

<style>
.header, .footer {
    height: 50px;
    background-color: aqua;
}
.middle {
	overflow: hidden;  /*设置为BFC，避免middle区域高度塌陷*/
}
.middle .left,  .middle .right {
    width: 200px;
    height: 100px;
    background-color: blueviolet;
}
.middle .left {
    float: left
}
.middle .right {
    float: right
}
.middle .content {
    height: 100px;
    margin: 0 200px;
    background-color: chartreuse;
}
</style>

<!--html-->
<div class="header"></div>
<div class="middle">
   <div class="left"></div>
   <div class="right"></div>
   <div class="content"></div>
</div>
<div class="footer"></div>

• 两边栏左右浮动，中间内容区设置左右边距实现
• 内容不能优先显示

二、BFC

<style>
.header, .footer {
    height: 50px;
    background-color: aqua;
}
.middle {
	overflow: hidden;  /*设置为BFC，避免middle区域高度塌陷*/
}
.middle .left,  .middle .right {
    width: 200px;
    height: 100px;
    background-color: blueviolet;
}
.middle .left {
    float: left
}
.middle .right {
    float: right
}
.middle .content {
    height: 100px;
    overflow: hidden;
    background-color: chartreuse;
}
</style>

<!--html-->
<div class="header"></div>
<div class="middle">
   <div class="left"></div>
   <div class="right"></div>
   <div class="content"></div>
</div>
<div class="footer"></div>

• 原理大致同流式布局，不过不是给内容区设置边距，而是利用BFC
• 给content区域设置为BFC后，根据BFC特性，可以阻止content被浮动元素覆盖
• 内容不能优先显示

三、绝对定位

<style>
.header, .footer {
    height: 50px;
    background-color: aqua;
}
.middle {
    position: relative;
}
.middle .left,  .middle .right {
    position: absolute;
    top: 0;
    width: 200px;
    height: 100px;
    background-color: blueviolet;
}
.middle .left {
    left: 0
}
.middle .right {
    right: 0
}
.middle .content {
    margin: 0 200px;
    height: 100px;
    background-color: chartreuse;
}
</style>

<div class="header"></div>
<div class="middle">
   <div class="content"></div>
   <div class="left"></div>
   <div class="right"></div>
</div>
<div class="footer"></div>

• 两边栏对于中间middle区域绝对定位，设置top: 0和left: 0或right: 0，中间区域设置外边距
• 内容可以优先显示
• 只适用于高度确定的情况，当两边栏高度大于内容区时，多出部分就会遮挡footer

四、双飞翼布局

<style>
.header, .footer {
    height: 50px;
    background-color: aqua;
}
.middle {
    overflow: hidden;
}
.middle .left,  .middle .right {
    width: 200px;
    height: 100px;
    background-color: blueviolet;
}
.middle .left {
    float: left;
    margin-left: -100%;
}
.middle .right {
    float: left;
    margin-left: -200px;
}
.middle .container {
    float: left;
    width: 100%;
}
.middle .container .content {
    margin: 0 200px;
    height: 100px;
    background-color: chartreuse;
}
</style>

<div class="header"></div>
<div class="middle">
    <div class="container">
        <div class="content"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

• 内容区content包裹在一个新容器container中
• container、left、right三者均浮动float: left
• 设置container：width: 100%
• 设置left：margin-left: -100%
• 设置right：margin-left: -200px
• 设置content：margin: 0 200px

其实就是流式布局的改进，使得内容可以优先显示，缺点是多增加了一层div，页面结构变化

五、圣杯布局

<style>
.header, .footer {
    height: 50px;
    background-color: aqua;
}
.middle {
    overflow: hidden;
    padding: 0 200px;   /*margin的话两个边栏就会被隐藏了*/
}
.middle .left,  .middle .right {
    float: left;
    position: relative;
    width: 200px;
    height: 100px;
    background-color: blueviolet;
}
.middle .left {
    left: -200px;
    margin-left: -100%;
}
.middle .right {
    left: 200px;
    margin-left: -200px;
}
.middle .content {
    float: left;
    width: 100%;
    height: 100px;
    background-color: chartreuse;
}
</style>

<div class="header"></div>
<div class="middle">
    <div class="content"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

• middle设置padding: 0 200px
• left、right、content三者均浮动
• content设置width: 100%
• left设置margin-left: -100%; position: relative; left: -200px
• right设置margin-left: -200px; position: relative; left: 200px
• 类似于双飞翼，但是页面结构比较好

六、flex布局

<style>
.header, .footer {
    height: 50px;
    background-color: aqua;
}
.middle {
    display: flex;
}
.middle .left,  .middle .right {  /* 三个div默认宽度都是100%，因此不够容下，需要根据flex有关的属性值去控制*/
    flex: 0 1 200px;
    height: 100px;
    background-color: blueviolet;
}
.middle .left {
    order: -1;
}
.middle .content {
    flex-grow: 1;
    height: 100px;
    background-color: chartreuse;
}
</style>

<div class="header"></div>
<div class="middle">
    <div class="content"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

• 内容可以优先显示

七、表格布局

<style>
    .header, .footer {
        height: 50px;
        background-color: aqua;
    }
    .middle {
        display: table;
        width: 100%;  /*表格必须设置宽度*/
    }
    .middle .left,  .middle .right {  /*同一行的tabel-cell的高度一致且由最高的高度决定*/
        display: table-cell;
        width: 200px;
        height: 100px;
        background-color: blueviolet;
    }
    .middle .content {
        display: table-cell;
        background-color: chartreuse;
    }
</style>

<div class="header"></div>
<div class="middle">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

• 内容不能优先显示
• 但高度可以把控一致，在内容和边栏高度不一致时，三者的高度均会设置为最高的那个

八、网格布局

<style>
    .header, .footer {
        height: 50px;
        background-color: aqua;
    }
    .middle {
        display: grid;
        grid-template-columns: 200px auto 200px;
        grid-template-rows: 100px;  /*高度设定了就不变，内容多的会溢出，可以设置为auto，则三者的高度一致且为内容最高的那个的高度*/
    }
    .middle .left,  .middle .right {
        background-color: blueviolet;
    }
    .middle .content {
        background-color: chartreuse;
    }
</style>

<div class="header"></div>
<div class="middle">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

• 内容不能优先显示
• 高度可以把控

九、一些注意事项

• 高度不一问题：
  1. grid和table和flex等可以把控高度的没有问题
  2. 其他的：可以给内容区和两个边栏设置padding-bottom：9999px; margin-bottom: -9999px
• 当窗口太小，内容区的宽度可能会变成0，此时可以设置min-width限制一下，顺带提一下，设置后，内容区就不会继续减小了，但是会去挤压两边栏的宽度了，因此两边栏也可以设置上min-width，当文档宽度等于最小宽度时，此时窗口再小，文档也不会受到挤压