三栏自适应布局

这里讲讲自适应布局。
我们经常看到这种三栏布局。这样的

QQ截图20190118150919.jpg

左右边的高度由其中更高的决定的
接下来我贴出代码，顺便解释一下，虽然很多人都知道这样能够实现，但是他不知道为什么？看解释之前先进行自己试验一下。否则也不能理解深刻

    * {
      padding: 0px;
      margin: 0px;
    }

    .wrap {
      overflow: hidden;
    }

    .left {
      width: 300px;
      float: left;
      background-color: #C5C5C5;
      padding-bottom: 3000px;
      margin-bottom: -3000px;
    }

    .right {
      width: 300px;
      float: right;
      background-color: yellow;
      padding-bottom: 3000px;
      margin-bottom: -3000px;
    }

    .main {
      height: 500px;
      background-color: lightpink;
      margin: 0 310px 0 310px;
    }

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

解释

我们先解释.left和.right的css应该比较好理解。这三句话比较重要，说说每句话的作用

float: right; //漂浮：按照道理应该是脱离文档流了。
padding-bottom: 3000px; //撑开浮动的元素，毕竟浮动元素是没有高度的
//觉得既然浮动了，设置padding还能理解，设置margin有什么用？
margin-bottom: -3000px;

接下来：
大家尝试一下这个：是这样的

    * {
      padding: 0px;
      margin: 0px;
    }

    .wrap {
      overflow: hidden;
      background: #C5f500
    }

    .left {
      width: 300px;
      float: left;
      background-color: #C5C5C5;
      padding-bottom: 400px;
    }

  <div class="wrap">
    <div class="left">左边</div>
  </div>

QQ截图20190118154705.jpg

其实overflow: hidden的元素是能够包含浮动元素的！！！因此，我们要padding-bottom给抵消掉。我们使用margin-bottom给抵消掉。

不信继续往下看。是这样的

    * {
      padding: 0px;
      margin: 0px;
    }

    .wrap {
      overflow: hidden;
      background: rgb(12, 245, 245);
    }

    .left {
      width: 300px;
      float: left;
      background-color: #C5C5C5;
      padding-bottom: 50px;
      margin-bottom: -50px;
    }

    .main {
      height: 100px;
      background-color: lightpink;
      margin: 0 310px 0 310px;
    }

  <div class="wrap">
    <div class="left">左边</div>
    <div class="main">中间</div>
  </div>

QQ截图20190118160143.jpg

所以应该明白了吧？