CSS 两栏、三栏布局的经典布局 +（圣杯、双飞翼布局）

● 两栏布局

左侧固定宽度，右侧自适应宽度

5种方式布局
● float + margin 布局
● 定位 + margin 布局
● flex 布局
● calc()布局
● table 布局

html部分：

  <div class="wrapper">
         <aside></aside>
         <div class="content"></div>
     </div>

方法一：float + margin

将左边元素固定宽度，并设置为浮动，使其脱离文档流。右边元素的左margin设置为左侧元素的宽度值。

<style>
        *{
            margin: 0;
            padding:0;
        }       
        aside {
            float: left;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .content {
            margin-left: 200px;
            height: 100px;
            background-color: yellow;
        }

    </style>

方法二：定位 + margin

与第一种相似：注意将父盒子设置为相对定位

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            position: relative;
        }
        aside {
            position: absolute;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .content {
            margin-left: 200px;
            height: 100px;
            background-color: yellow;
        }
    </style>

方法三：flex

父盒子设置 display： flex

  <style>
        *{
            padding:0;
            margin:0;
        }
        .wrapper {
            display: flex;
        }
        aside {
            /* grow / shrink / basis */
            flex: 0 0 200px;  
            background-color:red;
        }
        .content {
            /* aside的grow为0，content grow为1,content独享剩下的空间 */
            flex : 1;
            height: 100px;
            background-color: yellow;
        }

    </style>

方法四：calc()

左右盒子：一个左浮，一个右浮

calc()计算的宽度：减去的宽度为左侧固定的宽度

 <style>
        *{
            padding:0;
            margin: 0;
        }
        aside {
            float: left;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .content {
            float: right;
            width:calc( 100% - 200px );
            height: 100px;
            background-color: yellow;
        }

    </style>

方法五：table

父盒子设置为display: table;
子盒子设置为display: table-cell;
table 中的display属性：
table ： 指定对象作为块级元素的表格
inline-table：指定对象为内联元素级的表格
table-caption: 指定对象作为表格的标题
table-cell: 指定对象作为表格单元格
table-row-group:指定对象作为表格行组
table-header-group: 指定对象作为表格的标题组
table-footer-group: 指定对象作为表格脚注组

 <style>
        *{
            padding:0;
            margin: 0;
        }
        .wrapper {
            display: table;
            width: 100%;
        }
        aside {
            display: table-cell;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .content {
            display: table-cell;
            height: 100px;
            background-color: yellow;
        }
    </style>

● 三栏布局

7种方式布局
● float + margin 布局
● 定位 + margin 布局
● flex 布局
● table 布局
● 圣杯布局
● 双飞翼布局
● margin负值布局

方法一： float + margin

左右盒子浮动，中间盒子加左右margin值，值分别为左右盒子的宽度
注意：这三个div的顺序必须是将主体盒子放在最后面，左右盒子的顺序任意。

 <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>   

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            width: 100%;
        }
        .left {
            float: left;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .main {
            margin-left: 200px;
            margin-right: 200px;
            background-color: blue;
            height: 100px;
        }      
        .right {
            float: right;
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
     
    </style>

方法二：定位 + margin

与float差不多

  <style>
        *{
            padding: 0;
            margin:0;
        }
        .left {
            position: absolute;
            top:0;
            left: 0;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .main {
            margin:0 200px;
            height: 100px;
            background-color: blue;
        }
    </style>

方法三：flex()

<body>
    <div class="left"></div>
    <div class="main"></div> 
    <div class="right"></div>
</body>
 <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            width: 100%;
            display: flex;
        }
     .left {
            flex: 0 1 200px;
            height: 100px;
            background-color: red;
        }
        .right {
            flex: 0 1 200px;
            height: 100px;
            background-color: blue;
        }
        .main {
            flex: 1;
            height: 100px;
            background-color: yellow;
        }
    </style>

方法四：table

<body>
    <div class="left"></div>
    <div class="main"></div> 
    <div class="right"></div>
</body>
  <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            display: table;
            width: 100%;
        }
        .left,
        .right 
        {
            display: table-cell;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .main {
            display: table-cell;
            height: 100px;
            background-color: blue;
        }
    </style>

方法五：圣杯

1：HTML部分一定先写main中间盒子，必须先渲染。
2：三个盒子设置float： left
3：中间盒子宽度width： 100%独占一行
4：使用margin-left属性将左右两边的盒子拉回与中间盒子同一行
.left{ margin-left: -100%};向左走一个父盒子的宽度
.right{ margin-left: 负的自身宽度}
5： 父盒子设置padding给两边盒子留出位置(设置box-sizing)
6：左右盒子使用相对定位占据padding部分，都需要左移自身宽度，避免遮挡中间盒子的内容。

<body>
      <div class="parent">
        <div class="main"></div> 
        <div class="left"></div>
        <div class="right"></div>  
    </div>
</body>
 <style>
        *{
            padding: 0;
            margin: 0;
        }
      .parent{
            /* 父盒子设置padding为左右两个盒子空出位置，以免遮挡中间盒子的内容 */
            padding: 0 200px;
            box-sizing: border-box;
        }
        .left {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            /* 使其去上一行 */
            margin-left: -100%;
            /* 定位到正确的位置 */
            position: relative;
            left: -200px;
        }
        .main {
            width:100%;
            height: 200px;
            float: left;
            background-color: red;
        }
        .right {
            width:200px;
            float: left;
            height: 200px;
            background-color: yellow;
            /* 使其去上一行 */
            margin-left: -200px;
            /* 定位到正确的位置 */
            position: relative;
            left: 200px;
        }
    </style>

方法六：双飞翼

与圣杯模式相似，只是中间盒子增加一个内容盒子，用内容盒子设置左右margin，留给左右盒子，避免内容被遮挡。(不需要定位了)

1：中间盒子宽度width:100%;独占一行
2：三个盒子设置float： left;
3：使用margin-left属性将左右两边的盒子拉回与中间盒子同一行
.left{ margin-left: -100%};向左走一个父盒子的宽度
.right{ margin-left: 负的自身宽度}
4: 中间主盒子里面的内容盒子设置左右margin，避免被遮挡内容

<body>
        <div class="main">
            <div class="content">nei</div>
        </div>
        <div class="left">内容</div>
        <div class="right">内容</div>
</body>
 <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            width: 100%;
        }
        .main,
        .left,
        .right
         {
           height: 100px;
           float: left; 
        }
        .main {
            width: 100%;
            background-color: blue;
        }
        .main .content {
            margin: 0 200px;
        }
        .left {
            width: 200px;
            background-color: red;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            background-color: yellow;
            margin-left: -200px;
        }

    </style>

方法七：margin负值

在圣杯与双飞翼的基础上适当改变。

直接设置中间盒子width： 100%独占一行，设置左右padding为左右盒子留出位置，并且设置box-sizing:border-box;使其变为ie盒模型。

  <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            width: 100%;
            /* padding: 0 200px; */
        }
        .left,
        .main,
        .right {
            /* position: relative; */
            float: left;
            height: 100px;
        }
        .main {
             width: 100%;            
             background-color: blue;
             /* 
             设置padding防止内容被遮挡
             设置box-sizing保证宽度不变
              */
             padding: 0 200px; 
             box-sizing: border-box;
         }
        .left {
            width: 200px;
            /* left: -200px; */
            background-color: red;
            /* 调整浮动的位置到中间列的左侧 */
            margin-left: -100%;
         }
         .right {
             width: 200px;
             background-color: yellow;
             margin-left: -200px;
         }
        
    </style>
<body>
        <div class="main">nei</div>
        <div class="left">内容</div>
        <div class="right">内容</div>
</body>

小结：后三种都是一样的思路，只是在避免内容遮挡这一块有所不同，个人觉得最后一种更好，既不用设置相对定位，也不用添加一个内容盒子。