两列布局（左边定宽，右边自适应）

HTML代码如下：

<div class="parent"> 
    <div class="left">侧栏</div>
    <div class="right">主栏</div>
</div>

思路1：采用float实现.

对parent父节点设置padding-left: 210px; ,对left侧栏节点设置float:left;和margin-left: -210px;,width:200px;，然后对right主栏设置float:left;。最后记得清楚浮动啊,不然parent父节点后面的兄弟节点会受到浮动元素的影响的。

.parent:after{
    content:'.';
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

改进版本：float + margin + (fix)

兼容性很好，适用于多版本浏览器（包括IE6）但是多了层right-fix的结构。但left不可选择，被right-fix盖住。需要设置left的 position: relative;来提高层级。

<div class="parent">
  <div class="left">
    <p>left</p>
  </div>
    /*外层在包裹一个容器*/
  <div class="right-fix">
    <div class="right">
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>
<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

思路2：采用flex实现.

对parent父节点设置display: flex;，对right主栏设置flex: 1;

.parent{ 
      display: flex ; 
}
.left { 
       width: 200px;
       margin-right: 10px;
}
.right{
       /*等价于flex:1 1 0; 增长因子和收缩因子都为1，
       基础宽度为0,那么剩余宽度都分配给right*/
       flex: 1 ; 
}

思路3：使用table实现.

对parent父节点设置display: table;，table-layout: fixed;,对left节点和right节点设置display: table-cell;

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;/*设置表格布局算法,列宽由表格宽度和列宽度设定。*/
}
.left {
    display: table-cell;/*让标签元素以表格单元格的形式呈现，类似于td标签*/
    width: 200px;
    height:200px;
    background-color:red;
}
.right {
    display: table-cell;/*让标签元素以表格单元格的形式呈现，类似于td标签*/
    background-color:green;
    /*宽度为剩余宽度*/
}

两列布局（左边不定宽，右边自适应）

思路1：float + overflow.

思路：对parent父节点设置overflow: hidden;，对left节点设置float: left;,对right节点设置overflow: auto;

.parent{
     overflow:hidden;
     zoom:1;
     margin:10px;
}  
.left{
     float:left;
}  
.right{
     zoom:1;
     overflow:auto;
}

思路2：flex.

对parent父节点设置display: flex;，对right主栏设置flex: 1;

.parent{
     display:flex;
}
.left{
     margin-right:20px;
}
.right{
      flex:1;
}

圣杯布局与双飞翼布局-始于淘宝UED

圣杯布局与双飞翼布局

圣杯布局与双飞翼布局

float实现三列布局

代码如下，这种方式存在问题，middle作为最重要的东西被放在了最后面，浏览器是从上到下解析HTML文档的。

<div class="parent">  
      <div class="left">我是左边</div>
      <div class="right">我是右边</div>
      <div class="middle">我是中间</div>
</div>
.left{
        float:left;
        background-color: red;
}
.middle{
        background-color: yellow;
}
.right{
        background-color: green;
        float:right;
}

解决方案：

1. 设置middle节点为float:left,对left节点设置float:left和 margin-left: -100%;，使得left节点移到middle节点的左边平齐。
2. 设置right节点设置float:left和 margin-left: -right节点的宽度(150px);，使得right节点移到middle节点的右边平齐。
3. 然后对parent节点设置padding-left: 150px;和padding-right: 150px;。

得到如下的修改结果

更改后的结果

4. 设置left节点为position: relative;,left: -150px;,使得left节点回到最左边的位置

5. 设置left节点为position: relative;,right: -150px;,使得right节点回到最左边的位置 
   到这步，就是圣杯布局结束了，(我偷懒，没有写Header和Footer)

更改后的结果

下面是双飞翼布局干的事情了：

6. 在middle节点下面插入<div class="inner">我是中间</div>，把之前的步骤3,步骤4，步骤5注释掉。加入inner节点的样式为margin-left: 150px;和margin-right: 150px;。

7. 设置parent节点为height:400px;和overflow: hidden;.设置middle,left,right节点为margin-bottom: -9999px;和padding-bottom: 9999px;使其充满整个parent容器

更改后的结果

全屏布局

.parent{
     display:flex;
}
.left{
     margin-right:20px;
}
.right{
      flex:1;
}

等分布局

.parent{
     display:flex;
}
.left{
     margin-right:20px;
}
.right{
      flex:1;
}

等高布局

.parent{
     display:flex;
}
.left{
     margin-right:20px;
}
.right{
      flex:1;
}

全等四宫格

全等四宫格

tab标签

tab标签

弹窗

弹窗