css实现三栏布局

假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。
初始化页面

*{
      padding: 0;
      margin: 0;
    }
.layout {
      margin-top: 20px;
    }
    .layout article div {
      min-height: 100px;
    }

下面是五种解决方案

<!-- float浮动的解决方案 -->
  <section class="layout float">
    <style>
      .layout.float .left {
        float: left;
        width: 300px;
        background: #ffa907;
      }
      .layout.float .right {
        float: right;
        width: 300px;
        background: pink;
      }
      .layout.float .center {
        background: #00d4ae;
      }
    </style>
    <article class="left-center-right">
      <div class="left">我是左边</div>
      <div class="right">我是右边</div>
      <div class="center">
          <h1>浮动解决方案</h1>
          <p>1.这是布局的中间部分</p>
          <p>2.这是布局的中间部分</p>
      </div>
    </article>
  </section>

<!-- 绝对定位的解决方案 -->
  <section class="layout absolute">
    <style>
      .layout.absolute .left-center-right>div {
        position: absolute;
      }
      .layout.absolute .left {
        left: 0;
        width: 300px;
        background: #ffa907;
      }
      .layout.absolute .center {
        left: 300px;
        right: 300px;
        background: #00d4ae;
      }
      .layout.absolute .right {
        right: 0;
        width: 300px;
        background: pink;
      }
    </style>
    <article class="left-center-right">
      <div class="left">我是左边</div>
      <div class="right">我是右边</div>
      <div class="center">
          <h1>绝对定位解决方案</h1>
          <p>1.这是布局的中间部分</p>
          <p>2.这是布局的中间部分</p>
      </div>
    </article>
  </section>

<!-- flexbox的解决方案 -->
  <section class="layout flexbox">
    <style>
      .layout.flexbox {
        margin-top: 140px;
      }
      .layout.flexbox .left-center-right {
        display: flex;
      }
      .layout.flexbox .left {
        width: 300px;
        background: #ffa907;
      }
      .layout.flexbox .center {
        flex: 1;
        background: #00d4ae;
      }
      .layout.flexbox .right {
        width: 300px;
        background: pink;
      }
    </style>
    <article class="left-center-right">
      <div class="left">我是左边</div>
      <div class="center">
          <h1>flexbox解决方案</h1>
          <p>1.这是布局的中间部分</p>
          <p>2.这是布局的中间部分</p>
      </div>
      <div class="right">我是右边</div>
    </article>
  </section>

<!-- 表格布局的解决方案 -->
  <section class="layout table">
    <style>
      .layout.table .left-center-right {
        width: 100%;
        display: table;
        height: 100px;
      }
      .layout.table .left-center-right>div {
        display: table-cell;
      }
      .layout.table .left {
        width: 300px;
        background: #ffa907;
      }
      .layout.table .center {
        background: #00d4ae;
      }
      .layout.table .right {
        width: 300px;
        background: pink;
      }
    </style>
    <article class="left-center-right">
      <div class="left">我是左边</div>
      <div class="center">
          <h1>flexbox解决方案</h1>
          <p>1.这是布局的中间部分</p>
          <p>2.这是布局的中间部分</p>
      </div>
      <div class="right">我是右边</div>
    </article>
  </section>

<!-- 网格布局的解决方案 -->
  <section class="layout grid">
    <style>
      .layout.grid .left-center-right {
        width: 100%;
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }
      .layout.grid .left {
        width: 300px;
        background: #ffa907;
      }
      .layout.grid .center {
        background: #00d4ae;
      }
      .layout.grid .right {
        width: 300px;
        background: pink;
      }
    </style>
    <article class="left-center-right">
      <div class="left">我是左边</div>
      <div class="center">
          <h1>flexbox解决方案</h1>
          <p>1.这是布局的中间部分</p>
          <p>2.这是布局的中间部分</p>
      </div>
      <div class="right">我是右边</div>
    </article>
  </section>

几种方案的比较
1.浮动布局 缺点：浮动以后脱离文档流 优点：兼容性好
2.绝对定位 缺点：脱离文档流 ，可使用性差 优点：快捷
3.flexbox布局 移动端使用很多
4.表格布局 兼容性好
5.网格布局 代码量少

另补充两种方式

<section class="layout margin">
    <style>
      .layout.margin .left-center-right .main {
        width: 100%;
        float: left;
      }
      .layout.margin .center {
        margin: 0 300px;
        background: #00d4ae;
      }
      .layout.margin .left {
        float: left;
        width: 300px;
        margin-left: -100%;
        background: #ffa907;
      }
      .layout.margin .right {
        float: right;
        width: 300px;
        margin-left: -300px;
        background: pink;
      }
    </style>
    <article class="left-center-right">
      <div class="main">
        <div class="center">
            <h1>margin解决方案</h1>
            <p>1.这是布局的中间部分</p>
            <p>2.这是布局的中间部分</p>
        </div>
      </div>
      <div class="left">我是左边</div>
      <div class="right">我是右边</div>
    </article>
  </section>

中间的主体使用双层标签，外层div宽度100%显示，并且浮动，内层div为真正的主体内容,含有左右300像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即300像素。

<section class="layout margin">
    <style>
      .layout.margin .left-center-right .main {
        padding: 300px;
      }
      .layout.margin .center {
        width: 100%;
        float: left;
        background: #00d4ae;
      }
      .layout.margin .left {
        float: left;
        margin-left: -100%;
        position: relative;
        left: -300px;
        width: 300px;
        background: #ffa907;
      }
      .layout.margin .right {
        float: right;
        margin-left: -300px;
        position: relative;
        right: -300px;
        width: 300px;
        background: pink;
      }
    </style>
    <article class="left-center-right">
      <div class="main">
        <div class="center">
            <h1>margin解决方案</h1>
            <p>1.这是布局的中间部分</p>
            <p>2.这是布局的中间部分</p>
        </div>
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>
      </div>
    </article>
  </section>

首先用一个外层div包裹主体和左右两栏，外层div设置左右padding:300px,主体和左右两栏左浮动，左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了主题的左侧，再相对定位position:relative;left:-300px;将左栏移动到外层的padding区域，以保证不遮挡主体区域；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即300像素，同时也需要设置相对定位，position:relative;right:-300px;以保证不遮挡主体区域。