本文已参与「新人创作礼」活动，—起开启掘金创作之路。

两栏布局

.aside是左边的盒子，.main是右边的盒子

下面是所有结果的效果图：

浮动+margin

给左边盒子.aside添加一个浮动，之后再给右盒子.main设置一个marign-left，将其挤到右边去，形成左边定宽，右边自适应。

其中margin-left的值是盒子.aside的宽度。

 <style>
   * {
     margin: 0;
     padding: 0;
   }
   .aside {
     float: left;
     width: 200px;
     background-color: pink;
   }
   .main {
     margin-left: 200px;
     /* 这里不设置宽度也可以 */
     /* width: auto; */
     width: 100%;
     min-height: 200px;
     background-color: skyblue;
   }
 </style>
 <body>
   <div class="contain">
     <div class="aside">这是左侧的广告</div>
     <div class="main">这是右侧的内容</div>
   </div>
 </body>

浮动+BFC

给左边盒子.aside添加一个浮动，之后可以给右盒子.main设置一个overflow:hidden开启BFC，清除左侧盒子.aside浮动带来的影响，形成左边定宽，右边自适应。

 <style>
   * {
     margin: 0;
     padding: 0;
   }
   .aside {
     float: left;
     width: 200px;
     background-color: pink;
   }
   .main {
     /* 开启BFC，清除左侧浮动的影响 */
     overflow: hidden;
     /* 这里不设置宽度也可以 */
     width: auto;
     /* 
     清除了浮动，会将两个子元素处于同一水平线
     此时不能将宽度设置为100%，会将.main挤压到第二行去 */
     /* width: 100%; */
     min-height: 200px;
     background-color: skyblue;
   }
 </style>
 <body>
     <div class="contain">
         <div class="aside">这是左侧的广告</div>
         <div class="main">这是右侧的内容</div>
     </div>
 </body>

左盒子定位+margin

此时将左边盒子.aside的浮动，改变成定位就行了，右盒子.main还是设置一个marign-left，将其挤到右边去，形成左边定宽，右边自适应。

其中margin-left的值是盒子.aside的宽度。

定位需是absolute/fixed绝对定位或固定定位，但固定定位不符合题意，则使用absolute绝对定位；注意子绝父相。

 <style>
   * {
     margin: 0;
     padding: 0;
   }
 
   .contain {
     position: relative;
   }
 
   .aside {
     /* 绝对定位才能脱离文档，相对定位不行 */
     position: absolute;
     left: 0;
     top: 0;
     width: 200px;
     background-color: pink;
   }
 
   .main {
     margin-left: 200px;
     /* 这里不设置宽度也可以 */
     /* width: auto; */
     width: 100%;
     min-height: 200px;
     background-color: skyblue;
   }
 </style>
 <body>
   <div class="contain">
     <div class="aside">这是左侧的广告</div>
     <div class="main">这是右侧的内容</div>
   </div>
 </body>

右盒子定位+float

给左边盒子.aside添加一个浮动，然后将右盒子.main的marign-left改成定位，将定位到右边去，形成左边定宽，右边自适应。

定位仍然使用absolute绝对定位；注意子绝父相。

  <style>
    .contain {
      position: relative;
    }
 
    .aside {
      float: left;
      width: 200px;
      background-color: pink;
    }
 
    .main {
      /* 绝对定位才能脱离文档，相对定位不行 */
      position: absolute;
      left: 200px;
      top: 0;
      /* 此时脱离了文档流，必须设置宽度为 100% 才能充满屏幕 */
      width: 100%;
      min-height: 200px;
      background-color: skyblue;
    }
 </style>
 <body>
   <div class="contain">
     <div class="aside">这是左侧的广告</div>
     <div class="main">这是右侧的内容</div>
   </div>
 </body>

左右盒子定位

可以将左右盒子都是用定位position:absolute；来设置左侧盒子固定宽度，右侧盒子自适应。

  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    .contain {
      position: relative;
    }
 
    .aside {
      /* 绝对定位才能脱离文档，相对定位不行 */
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      background-color: pink;
    }
 
    .main {
      /* 绝对定位才能脱离文档，相对定位不行 */
      position: absolute;
      left: 200px;
      top: 0;
      /* 此时脱离了文档流，必须设置宽度为 100% 才能充满屏幕 */
      width: 100%;
      min-height: 200px;
      background-color: skyblue;
    }
 </style>
 <body>
   <div class="contain">
     <div class="aside">这是左侧的广告</div>
     <div class="main">这是右侧的内容</div>
   </div>
 </body>

flex布局

先将父盒子.contain设置为弹性容器display:flex;，然后给右侧盒子.main设置flex:1;，使其自动撑满剩余空间。

 <style>
   * {
     margin: 0;
     padding: 0;
   }
 
   .contain {
     /* 将父容器设置为弹性容器 */
     display: flex;
   }
 
   .aside {
     background-color: pink;
   }
 
   .main {
     /* 内容区会自动放大占满剩余空间 */
     flex: 1;
     min-height: 200px;
     background-color: skyblue;
   }
 </style>
 <body>
   <div class="contain">
     <div class="aside">这是左侧的广告</div>
     <div class="main">这是右侧的内容</div>
   </div>
 </body>

圣杯布局

请注意，DOM 元素布局与之前不一样。

实现步骤：

给左盒子.aside设置宽、背景颜色和向左浮动；
给右盒子.main设置宽 (100%)、背景颜色和向左浮动；
此时因为右盒子.main的宽度是100%，左盒子.aside会处于.main的下方；
给左盒子.aside设置margin-left: -100%;让其处于布局的左侧；
给父盒子.contain设置margin-left: 200px;让其向右移动 200px；
最后给左盒子.aside设置相对定位，其中left: -200px;就可以实现圣杯布局了。

 <style>
   * {
     margin: 0;
     padding: 0;
   }
 
   /* 父盒子 */
   .contain {
     /* 1.将盒子整体向右移动 200px */
     /* 使用定位也可以 */
     /* position: relative;
     left: 200px;
     top: 0; */
     margin-left: 200px;
   }
 
   /* 左侧固定盒子 */
   .aside {
     float: left;
     /* 2.
     把左侧的子盒子像左移动 200px
     形成左右对齐的布局
     */
     /* 使用绝对定位会脱离文档流不要使用 */
     position: relative;
     left: -200px;
     top: 0;
     /* 把此盒子放到最左侧去形成左右布局 */
     margin-left: -100%;
     width: 200px;
     background-color: pink;
   }
 
   /* 右侧自适应盒子 */
   .main {
     float: left;
     width: 100%;
     min-height: 200px;
     background-color: skyblue;
   }
 </style>
 <body>
   <div class="contain">
     <div class="main">这是右侧的内容</div>
     <div class="aside">这是左侧的广告</div>
   </div>
 </body>

双飞翼布局

请注意：DOM 结构中的.main中间包含了一层，与圣杯布局有点区别。

方法1