三栏布局（左中右布局）

1. float实现（左右中）

左右块浮动，中间自适应，主要利用margin-left和margin-right属性 。注意左右块给固定宽度

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

.left{
      background-color: pink;
      width: 100px;
      height: 300px;
      float: left;
    }
    .main{
      background-color: blue;
      margin-left: 100px;
      margin-right: 100px;
      height: 300px;
    }
    .right{
      background-color: pink;
      width: 100px;
      height: 300px;
      float: right;
    }

2.圣杯布局（中左右）

• 求：三列布局；中间主体内容前置，且宽度自适应；两边内容定宽
  • 好处：重要的内容放在文档流前面可以优先渲染
  • 原理：利用相对定位、浮动、负边距布局，而不添加额外标签

如果父元素在子元素的margin的同向上有padding或border的话，子元素的margin相对于父元素，否则相对于父元素以外的元素。

<div class="container">
    <div class="main">中间内容</div>
    <div class="left">左边内容</div>
    <div class="right">右边内容</div>
  </div>

 .container{
      padding: 0 300px 0 200px;
    }
    .main{
      background-color:pink;
      height: 400px;
      width: 100%;
      float: left;
    }
    .left{
      background-color:blue;
      height: 400px;
      width: 200px;
      float: left;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right{
      background-color:blue;
      height: 400px;
      width: 300px;
      float: left;
      margin-left: -300px;
      position: relative;
      left: 300px;
    }

3.双飞翼布局（中左右）

• 双飞翼布局：对圣杯布局（使用相对定位，对以后布局有局限性）的改进，消除相对定位布局
• 原理：主体元素上设置左右边距，预留两翼位置。左右两栏使用浮动和负边距归位，消除相对定位。

我觉得圣杯布局和双飞翼布局的主要区别在于html结构，margin-left结构是基于main的，而main没有padding。所以在左右块结构margin-left的时候是不会遮住一部分main-content的内容，继而消除了相对定位的隐患。（自我理解，我表达可能不太清楚）

<div class="container">
    <div class="main">
      <div class="main-content">中间内容</div>
    </div>
    <div class="left">左侧内容</div>
    <div class="right">右侧内容</div>
  </div>

 .main{
      float: left;
      width: 100%;
      /* background-color: pink; */
      height: 400px;
    }
    .main div{
      margin-left: 200px;
      margin-right: 300px;
      background-color: pink;
      height: 400px;
    }
    .left{
      float: left;
      width: 200px;
      margin-left: -100%;
      background-color: blue;
      height: 400px;
    }
    .right{
      float: left;
      width: 300px;
      margin-left: -300px;
      background-color: blue;
      height: 400px;
    }

4.position中的绝对定位（左中右）

这个方法比较常规，不理解的童鞋们可以了解position定位原理，以及标准流

 <div class="container">
    <div class="left">左</div>
    <div class="center">中</div>
    <div class="right">右</div>
  </div>

*{
      margin: 0;
      padding: 0;
    }
    .left{
      background-color: blue;
      width: 200px;
      height: 400px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .right{
      background-color: blue;
      width: 300px;
      height: 400px;
      position: absolute;
      right: 0;
      top: 0;
    }
    .center{
      width: 100%;
      height: 400px;
      margin-left: 200px;
      margin-right: 300px;
      background-color: pink;
    }

5.table布局（左中右）

table布局比较简单，实际开发中table布局用的不是很多，主要会引起重排，浏览器资源消耗比较大 

<article class="main">
        <div class="left">左</div>
        <div class="center">中
            <h2>绝对定位</h2>
        </div>
        <div class="right">右</div>
    </article>

 .main{
            width: 100%;
            display: table;
        }
        .left ,.right, .center{
            display: table-cell;
        }

        .left{
            background-color: red;
            width: 300px;
        }
        .right{
            background-color: rosybrown;
            width: 200px;
        }
        .center{
            background-color: royalblue;
        }

6.flex布局(左中右)

flex布局，在平常开发中用的非常的多，还是需要深入了解掌握比较好

 <article class="main">
        <div class="left">左</div>
        <div class="center">中
            <h2>绝对定位</h2>
        </div>
        <div class="right">右</div>
    </article>

 .main {
            display: flex;
        }

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

        .center {
            background-color: blue;
            flex: 1;
        }

        .right {
            background-color: red;
            width: 400px;
        }