CSS常考布局的实现方式

首先给出基本的HTML结构

<div id="wrap">
  <div id="sidebar" style="height:240px;">固定宽度区</div>
  <div id="content" style="height:340px;">自适应区</div>
</div>
<div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>

方法一

固定宽度区浮动，自适应区不设宽度而设置 margin

  #wrap {
    overflow: hidden; *zoom: 1;
  }
  #content ,#sidebar {
    background-color: #eee; 
  }
  #sidebar {
    float: right; width: 300px;
  }
  #content {
    margin-right: 310px;
  }
  #footer {background-color: #f00;color:#fff; margin-top: 1em}

原理：div有个默认属性，即如果不设置宽度，那他会自动填满他的父标签的宽度。即宽度为100%，而宽度100%是相对于他的父标签来的，如果我们改变了他父标签的宽度，那content的宽度也就会变——比如我们把浏览器窗口缩小，那wrap的宽度就会变小，而content的宽度也就变小——但，他的实际宽度100%-310始终是不会变的。
只要我们记得清除浮动(这里我用了最简单的方法)，那footer也不会错位。而且无论content和sidebar谁更长，都不会对布局造成影响。

限制——html中sidebar必须在content之前

要点：将侧边区块<aside>域浮动，<aside>浮动后覆盖绿色<main>, 再将<main> overflow:auto，形成BFC，形成独立区域，达到效果。

方法二

固定宽度区使用绝对定位，自适应区照例设置margin

#wrap {
    *zoom: 1; position: relative;background-color: #eee; 
  }
#sidebar {
    width: 300px; position: absolute; right: 0; top: 0;background-color: #eee; 
  }
#content {
    margin-right: 310px;
  }

这段css中要注意给wrap加上了相对定位，以免sidebar太绝对了跑到整个网页的右上角而不是wrap的右上角。

不足：因为wrap对sidebar的无视，由于绝对定位会让其他元素无视他的存在，会造成footer跑到上面去。这种定位方式只能满足sidebar自己，但对他的兄弟们却毫无益处

方法三

float与margin齐上阵

把content的宽度设为100%,然后设置float:left，最后把他向左移动310，以便于sidebar能挤上来。
但这么一来content里面的内容也会跟着左移310，导致被遮住了，所以我们要把他重新挤出来。为了好挤，我用了一个额外的div包裹住内容，所以html结构变成了这种样子。

<div id="wrap">
  <div id="content" style="height:140px;">
    <div id="contentb">
      content自适应区，在前面
    </div>
  </div>
  <div id="sidebar" style="height:240px;">sidebar固定宽度区</div>
</div>

  #sidebar {
    width: 300px; float: right;background-color: #eee; 
  }
  #content {
    margin-left: -310px; float: left; width: 100%;background-color: #eee; 
  }
  #contentb {
    margin-left: 310px;
  }

方法四

使用负边距

<div id="main">
    <div class="center">
        <div class="content">
            main main main main main main
        </div>
    </div>
    <div class="aside"></div>
</div>
<div class="footer"></div>

#header,#footer{
            height: 100px;
            background-color: red;
            /* overflow: hidden; */
        }
        #main{
            overflow: hidden;
        }
        #main .center{
            height: 200px;
            width: 100%;
            float: left;
        }
        .center .content{
            height: 200px;
            background: green;
            margin-right: 100px;
        }
        #main .aside{
            height: 200px;
            width: 100px;
            background: blue;
            float: left;
            margin-left: -100px;
        }