常见布局-双栏布局

一列固定宽度，另外一列自适应宽度

如何实现
浮动元素 + 普通元素margin

 <style>
    #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;
    }
    .main{
      margin-left: 210px;
      height: 400px;
      background: red;
    }
    
    #footer{
      background: #ccc;
    }
  
  </style>
  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

左栏demo

如果需要侧栏在右边只需将.aside的浮动方向改成向右，.main的margin方向改成右就可以了。

为什么HTML结构里aside在main前？
如果main在aside前面的话，浏览器渲染的时候因为main是一个div渲染时按照块级元素渲染，占据一整行。那么接下去的aside设置浮动就会在main的下面一行实现浮动。而不会表现出悬浮于main上面的效果。