sticky footer布局，定位底部footer

其作用就是当内容区域比较少时，让footer也能正常定位到底部，以前我们使用js来达到这种效果，其实用css也是完全可以的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>sticky footer</title>
  <style type="text/css">
  /* 第一步设置盒子为满屏大小 */
    .box{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      overflow: auto;
      background: green;
    }
    /* 第二步子盒子设置最小高度且清除浮动 */
    .box .main{
      width: 100%;
      min-height: 100%;
    }
    .box .main .content{
      background: orange;
    }
    /* 第三步footer的高度和margin-top要相等 */
    .box .footer{
      position: relative;
      width: 100%;
      height: 100px;
      background: #f3f3f3;
      margin: -100px auto 0 auto;
      clear: both;
      text-align: center;
    }
    .clearfix{
      display: inline-block;

    }
    .clearfix::after{
      content: ".";
      display: block;
      height: 0;
      line-height: 0;
      visibility: hidden;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="main clearfix">
      <div class="content">
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
      </div>
    </div>

    <div class="footer">这是footer区域</div>
  </div>
</body>
</html>

原理我不清楚，效果很完美