一、写在前面
昨天百度面试，上来问了一个三栏布局，我当时想我会呀，看我的，一分钟搞定。但是在白板上就是展示不出来，我当时脑子里想的就是使用浮动，然后触发BFC。最后老是出现小问题。然后面试官:要不我们进行下一题吧。我想：如果要进入下一题， 不就完蛋了吗，直接gg。我当机立断:面试官，我还会另一种写法，然后一分钟使用flex布局写出来了。下面总结三栏布局，面试的时候，千万要找自己擅长的东西去回答。
二、总结
2.1、flex布局

<style>
    * {
      margin: 0px;
      padding: 0px;
    }
    #box {
      width: 100%;
      height: 300px;
      display: flex;
    }
    .left {
      width: 200px;
      height: 300px;
      background-color: red;
    }
    .center {
      flex: 1;
      background-color: green;
    }
    .right {
      width: 200px;
      height: 300px;
      background-color: red;
    }
  </style>

<div id="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

2.2、float浮动

<style>
    * {
      margin: 0px;
      padding: 0px;
    }
    #app {
      width: 100%;
      height: 300px;
    }
    .left {
      width: 200px;
      height: 300px;
      background-color: red;
      float: left;
    }
    .center {
      width: auto;
      height: 400px;
      background-color: green;
      overflow: hidden;
    }
    .right {
      width: 200px;
      height: 300px;
      background-color: red;
      float: right;
    }
  </style>

<div id="app">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>