一般的两栏布局，指的是左侧固定，右侧自适应。

    1. 可以利用浮动，左侧浮动，右侧设置 margin-left；右侧也可以设置 overflow: hidden，触发 BFC，因为触发 BFC 的元素不会和浮动元素重叠。

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7. <title>Document</title>
      8. <style>
      9.  * {
      10.    margin: 0;
      11.    padding: 0;
      12.  }
      13.  html, body {
      14.    height: 100%;
      15.  }
      16.  .outer {
      17.    height: 100%;
      18.  }
      19.  .left {
      20.    width: 200px;
      21.    height: 100%;
      22.    background-color: deeppink;
      23.    float: left;
      24.  }
      25.  .right {
      26.    height: 100%;
      27.    background-color: pink;
      28.    margin-left: 200px;
      29.  }
      30. </style>
      31. </head>
      32. <body>
      33. <div class="outer">
      34.  <div class="left">left</div>
      35.  <div class="right">right</div>
      36. </div>
      37. </body>
      38. </html>

    2. 利用 flex 布局，父级设置 flex，左侧宽度写死，右侧设置 flex为1

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
 * {
   margin: 0;
   padding: 0;
 }
 html, body {
   height: 100%;
 }
 .outer {
   height: 100%;
   display: flex;
 }
 .left {
   width: 200px;
   height: 100%;
   background-color: deeppink;
 }
 .right {
   height: 100%;
   background-color: pink;
   flex: 1;
 }
</style>
</head>
<body>
<div class="outer">
 <div class="left">left</div>
 <div class="right">right</div>
</div>
</body>
</html>

    3. 利用定位，给父元素设置相对定位，左侧设置 absolute，width 写死，右侧设置 margin-left 即可

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
 * {
   margin: 0;
   padding: 0;
 }
 html, body {
   height: 100%;
 }
 .outer {
   height: 100%;
   position: relative;
 }
 .left {
   width: 200px;
   height: 100%;
   background-color: deeppink;
   position: absolute;
 }
 .right {
   height: 100%;
   background-color: pink;
   margin-left: 200px;
 }
</style>
</head>
<body>
<div class="outer">
 <div class="left">left</div>
 <div class="right">right</div>
</div>
</body>
</html>