三栏布局的实现方式

1.float+margin
html部分

 <div class="container">
       <div class="left">11</div>
       <div class="right">33</div>
       <div class="main">22</div>
   </div>

css部分

 .left{
      float:left;
      height: 200px;
     width: 200px;
     background-color: green;
 }
 .right{
     float:right;
     width: 200px;
     height: 200px;
     background-color: red;
 }
 .main{
     background-color: pink;
     height: 200px;
     margin-left:200px;
     margin-right:200px;
 }

实现原理：两边使用float固定在左右两侧，留出中间的空白。

优点：结构清晰，实现较为简单，兼容性好。

缺点：

主体内容无法最先加载，当页面内容较多时，影响用户体验。
浮动会脱离文档流，必要时候，需要清除浮动，如果处理不好的话，页面布局会出现问题。
兼容性：所有主流浏览器都支持

2.float+overflow
其他同上

 .main{
     background-color: pink;
     height: 200px;
    overflow:hidden;
 }

该方法出发bfc从而达到自适应
3.flex布局
html结构

<div class="container">
       <div class="left">11</div>
       <div class="main">33</div>
       <div class="right">22</div>
   </div>

css布局

 .container{
        display:flex;
    }
 .left{
      
      height: 200px;
     width: 200px;
     background-color: green;
 }
 .right{
     
     width: 200px;
     height: 200px;
     background-color: red;
 }
 .main{
     background-color: pink;
     height: 200px;
    flex:1;
 }

4.通过table实现
html部分

 <div class="container">
       <div class="left">11</div>
       <div class="main">33</div>
       <div class="right">22</div>
   </div>

css部分

    .container{
        display:table;
        width:100%;
    }
 .left{
     display:table-cell; 
      height: 200px;
     width: 200px;
     background-color: green;
 }
 .right{
     display:table-cell;
     width: 200px;
     height: 200px;
     background-color: red;
 }
 .main{
     background-color: pink;
     height: 200px;
     display:table-cell;
 }

5.通过position来实现
html部分

<div class="container">
       <div class="left">11</div>
       <div class="right">33</div>
       <div class="main">22</div>
   </div>

css部分

  .container{
       position:relative;
    }
 .left{
     position:absolute;
     left:0; 
      height: 200px;
     width: 200px;
     background-color: green;
 }
 .right{
    position:absolute;
     width: 200px;
     height: 200px;
     background-color: red;
     right:0;
 }
 .main{
     background-color: pink;
     height: 200px;
     margin:0 200px;
 }

6.圣杯布局
html结构

<div class="container">
       <div class="main">22</div>
       <div class="left">11</div>
       <div class="right">33</div>
   </div>

css模块

 .container{
       position:relative;
       margin-left:200px;
       margin-right:200px;
    }
 .left{
     position:relative;
     left:-200px;
     float:left;
     margin-left:-100%;
      height: 200px;
     width: 200px;
     background-color: green;
 }
 .right{
    position:relative;
     right:-200px;
     width: 200px;
     height: 200px;
     background-color: red;
     float:left;
     margin-left:-200px;
 }
 .main{
     background-color: pink;
     float:left;
     height: 200px;
     width:100%;
 }

7.双飞翼布局
html结构

 <div class="content">
        <div class="main">22</div>
       </div>
       <div class="left">11</div>
       <div class="right">33</div>

css结构

 .content{
      float:left;
      width:100%;
      
  }
 .left{
     float:left;
     margin-left:-100%;
      height: 200px;
     width: 200px;
     background-color: green;
 }
 .right{
     width: 200px;
     height: 200px;
     background-color: red;
     float:left;
     margin-left:-200px;
 }
 .main{
     height: 200px;
     background-color: pink;
    margin-left:200px;
    margin-right:200px
    
    
 }