css三栏布局

三栏布局的实现方式有很多种，说起来很容易，但写的时候总是忘记，记录一下。

1.浮动实现

左边左浮动，右边右浮动，中间使用margin让出位置

 <div class="container">
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>
        <div class="center">我是中间</div>
 </div>

	.left {
       float: left;
       width: 100px;
       height: 200px;
       background-color: red;
     }
   
     .right {
       float: right;
       width: 100px;
       height: 200px;
       background-color: yellow;
     }
   
     .center {
       background-color: blue;
       height: 200px;
       margin-left: 100px;
       margin-right: 100px；
     }

中间部分还可以使用overflow: hidden触发BFC模式，由于BFC模式不与外部浮动元素重叠，因此也可以这样写

 .center {
        background-color: blue;
        height: 200px;
        overflow: hidden;
      }

兼容性好
中间部分会最后加载，内容较多时影响体验

2.圣杯布局

左中右三栏都设置浮动，给父级container设置左右padding留出位置，然后通过定位和margin负值来调整

      <div class="container">
      	<div class="center">我是中间</div>
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>      
      </div>

.container{
   	 padding-left:100px;
     padding-right:100px;
     overflow:hidden;  //设置一个BFC，清除浮动对后续元素产生影响
   }
   .left {
   	position:relative;
   	right:100px;
       float: left;
       width: 100px;
       height: 200px;
       margin-left: -100%;
       background-color: red;
     }
   
     .right {
     	position: relative;
     	left:100px;
       float: left;
       width: 100px;
       height: 200px;
       margin-left: -100px;
       background-color: yellow;
     }
   
     .center {
     	float: left;
     	width: 100%;
       background-color: blue;
       height: 200px;
       overflow: hidden;
     }

完整的圣杯布局还包含header和footer
由于center 是在 container 的padding中的，因此宽度小的时候会出现混乱。

3.双飞翼布局

双飞翼布局同样分为header、container、footer。
给 center 部分包裹了一个 main 通过设置margin主动地把页面撑开。

 <div class="container">
      	<div class="center">
      		<div class="main">我是中间</div>
      	</div>
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>      
      </div>

.container{
        overflow: hidden;
	}
	.left {
		position:relative;
        float: left;
        width: 100px;
        height: 200px;
        margin-left: -100%;
        background-color: red;
      }
    
      .right {
      	position: relative;
        float: left;
        width: 100px;
        height: 200px;
        margin-left: -100px;
        background-color: yellow;
      }
    
      .center {
      	float: left;
      	width: 100%;
      }

      .main{
      	margin:0 100px;
      	height:200px;
      	background-color: blue;
      	overflow: hidden;
      }

4.flex布局

使用display：flex来布局非常方便，但是需要考虑兼容性问题

<div class="container">
      	<div class="center">我是中间</div>
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>      
</div>

.container{
		display:flex;
		height: 200px;
	}
	.left{
		order:-1;
		width: 100px;
		background-color: red;
	}
	.right{
		
		width:100px;
		background-color: yellow;
	}
	.center{
		background-color: blue;
		flex:1;
	}

5.绝对定位+浮动

给 container 设置position: relative和overflow: hidden 作为绝对定位的参照
center 使用绝对定位，通过设置left和right并把两边撑开。
设置top: 0和bottom: 0使其高度撑开

<div class="container">
      	<div class="center">我是中间</div>
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>      
</div>

.container{
		position:relative;
		overflow: hidden;
	}
	.left{
		float: left;
		width: 100px;
		height: 200px;
		background-color: red;
	}
	.right{
		float: right;
		width:100px;
		height: 200px;
		background-color: yellow;
	}
	.center{
		position: absolute;
		background-color:blue;
		left: 100px;
		right: 100px;
		top:0;
		bottom: 0;
	}

缺点依赖于left 和 right 的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。

6.网格布局

利用dispaly：grid布局，极其方便，但是兼容性不好。

<div class="container">
        <div class="left">我是左边</div>
        <div class="center">我是中间</div> //这里center放在了中间
        <div class="right">我是右边</div>      
</div>

 .container {
        display: grid;
        width: 100%;
        grid-template-rows: 200px;
        grid-template-columns: 200px auto 200px;
    }//这里没有设置颜色

7.table-cell布局

给三栏都设置为表格单元 display: table-cell
left 和 right width: 200px，center width: 100%
分别为左右栏设置min-width: 200px确保不会被挤压。

<div class="container">
        <div class="left">我是左边</div>
        <div class="center">我是中间</div> //这里center放在了中间
        <div class="right">我是右边</div>      
</div>

.container {
        overflow: hidden;
        position: relative;
    }
    .container > div {  
        display: table-cell;
        height: 100%;
    }
    .center {
        margin: 0 200px;
        width: 100%;
        background: red;
    }
    .left {
        width: 200px;
        min-width: 200px;
        background-color: green;
    }
    .right {
        width: 200px;
        min-width: 200px;
        background-color: blue;
    }

display:table-cell 能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染。