三栏布局的8种方案

1、圣杯布局

1. 首先给这三个div都给一个float: left，让它们均左浮动。
2. 设置左盒子的margin-left: -100%，把左盒子拉上来，调整左盒子的浮动位置到中间盒子的左侧。再设置右盒子的margin-left: - 右盒子宽度px，把右盒子拉上来，调整右盒子的浮动位置到中间盒子的右侧。
3. 此时的布局基本出来了，但是中间盒子的左右两侧会被左右两个盒子覆盖掉，此时我们要通过相对定位来避免覆盖。给左右盒子position: relative，再分别设置它们的left和right,并且控制父元素的padding来为左右两边留白。

html结构：

<div class="outer">
    <div class="center"></div>
    <div class="left"></div>
  <div class="right"></div>
</div>
 

css布局

       body{
           min-width: 600px;
        }
      .outer{
          padding: 0 200px;
      }
      .center,.left,.right{
          float: left;
          height: 200px;
      }
      .center{
          width: 100%;
          background: burlywood;
      }
      .left{
          width: 200px;
          background: tomato;
          position: relative;
          margin-left: -100%;
          left: -200px;

      }
      .right{
          width: 200px;
          background: aquamarine;
          position: relative;
          margin-left: -200px;
          right: -200px;
      }

2、双飞翼布局

1.前面的布局和圣杯完全一致，只是从第三步开始的这一步略微有些差异。在双飞翼中避免左右盒子被覆盖，是通过设置inner_center的左右margin来实现的。，而不是通过父元素的 padding。
html结构：

<div class="outer">
    <div class="center">
        <div class="inner_center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

css布局

.center,.left,.right{
          float: left;
          height: 200px;
      }
      .center{
          width: 100%;
          background: burlywood;
      }
      .inner_center{
          margin: 0 200px;
      }
      .left{
          width: 200px;
          background: tomato;
          margin-left: -100%;

      }
      .right{
          width: 200px;
          background: aquamarine;
          margin-left: -200px;
      }

双飞翼布局的好处：

（1）主要的内容先加载的优化。

（2）兼容目前所有的主流浏览器，包括IE6在内。

（3）实现不同的布局方式，可以通过调整相关CSS属性即可实现。

3.对比圣杯布局和双飞翼布局：

（1）都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染。

（2）解决方案基本相似：都是三栏全部设置左浮动float：left,然后分别解决中间栏内容被覆盖的问题。

（3）解决中间栏内容被覆盖问题时，圣杯布局设置父元素的padding,双飞翼布局在中间栏嵌套一个div,内容放到新的div中，并设置margin，实际上，双飞翼布局就是圣杯布局的改进方案。

4. flex布局

html结构：利用flex布局，左右两栏设置固定大小，中间一栏设置为flex:1。

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

css样式：

 .container{
        display: flex;
    }
    .left{
        width:200px;
        background: red;
    }
    .main{
        flex: 1;
        background: blue;
    }
    .right{
        width:200px;
        background: red;
    }

5.绝对定位布局：position + margin

• 利用绝对定位，左右两栏设置为绝对定位，中间设置对应方向大小的margin的值。

html结构：

<div class="outer">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

css样式：

.outer{
  position: relative;
}
.left{
  position: absolute;
  width: 200px;
  height: 200px;
  background: tomato;
}
.right{
  position: absolute;
  top:0;
  right: 0;
  width: 200px;
  height: 100px;
  background: aquamarine;
}
.center{
  margin-left: 200px;
  margin-right: 200px;
  height: 300px;
  background: burlywood;

}

缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

6.float+margin

• 利用浮动，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注 意这种方式，中间一栏必须放到最后：
  html结构:

<div class="outer">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
</div>

css样式：

*{
    margin: 0;
    padding: 0;
}
.left{
    float: left;
    width: 300px;
    height: 100px;
    background: #631D9F;
}
.right{
    float: right;
    width: 300px;
    height: 100px;
    background: red;
}
.center{
    margin-left: 300px;
    margin-right: 300px;
    height: 300px;
    background-color: #4990E2;
}

7.table布局

html结构:

<div class="outer">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center</div>
</div>

css样式：

.outer{
    width: 100%;
    display: table;
}
.left,.center,.right{
    height: 300px;
    display: table-cell;
}
.left{
    width: 300px;
    background-color: red;
}
.right{
    width: 300px;
    background-color: red;
}
.center{
    background-color: #4990E2;
}

8、Grid网格布局

html结构：

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

css样式：

    .container{
        display: grid;
        width: 100%;
        grid-template-rows: 100px;  /*设置行高*/
        grid-template-columns: 100px auto 200px;  /*设置列数属性*/
    }
    .left{
        background: red;
    }
    .main{
        background: blue;
    }
    .right{
        background:red;
    }

原文链接：https://blog.csdn.net/ganyingxie123456/article/details/77054124