1.自适应布局方式：单列定宽，单列自适应布局

float + margin + (fix)

自适应的一列外侧增加一层结构.rightWrap并设置浮动。要实现自适应效果，.rightWrap宽度必须设置为100%。若不设置，float后的元素宽度将由内容撑开。
同时再配合盒模型属性的计算(left盒子宽度为x)，设置计算后的负margin值（即margin-left: - X px;），使两列元素在同一行显示。
同时两列之间的间距由.right的margin值确定。
由于右侧元素会层叠在左侧元素之上，.left需要使用relative来提升层级

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{position: relative;float: left;width: 100px;}    
.rightWrap{float: left;width: 100%;margin-left: -100px;}
.right{margin-left: 120px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="rightWrap" style="background-color: pink;">
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>
</div>

单列定宽，单列自适应布局

float + margin + calc

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;margin-right: 20px;}    
.right{float: left;width: calc(100% - 120px);}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

calc

float + overflow

还可以使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。
由于使用overflow不会改变元素的宽度属性，所以不需要重新设置宽度。
由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{ float: left;width: 100px;margin-right: 20px;}    
.right{overflow: hidden;zoom: 1;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>
</div>

效果如上
calc

table
　使用table布局的缺点是元素被设置为table后，内容撑开宽度，所以需要设置width:100%。若要兼容IE7-浏览器，需要改为结构。由于table-cell元素无法设置margin，若需要在元素间设置间距，需要增加结构

<style>
p{margin: 0;}
.parent{display:table;width: 100%;table-layout: fixed;}
.left,.rightWrap{display:table-cell;}
.left{width: 100px;}
.right{margin-left: 20px;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="rightWrap" style="background-color: pink;">
        <div class="right"  style="background-color: lightgreen;">
            <p>right</p>
            <p>right</p>
        </div>        
    </div>    
</div>

flex

<style>
p{margin: 0;}
.parent{display: flex;}
.left{width:100px;margin-right: 20px;}
.right{flex:1;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

2. 自适应布局方式:两列自适应布局

是指一列由内容撑开，另一列撑满剩余宽度的布局方式。

flex

<style>
p{margin: 0;}
.parent{display:flex;}  
.right{margin-left:20px; flex:1;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>        
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

在这里插入图片描述

float

在单列定宽单列自适应的两列布局中，经常用float和负margin配合实现布局效果。
但由于margin取值只能是固定值，所以在两列都是自适应的布局中就不再适用。
而float和overflow配合可实现两列自适应效果。使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。
由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器

<style>
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;margin-right: 20px;}    
.right{overflow: hidden;zoom: 1;}
</style>

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>left</p>
    </div>
    <div class="right"  style="background-color: lightgreen;">
        <p>right</p>
        <p>right</p>
    </div>        
</div>

效果如上！（flex）

3. 圣杯布局：两侧宽度固定，中间宽度自适应的三栏布局。

在这里插入图片描述
步骤分析：

center 放在dom的最前面，紧接着是left、right，三部分都左浮动float:left。
然后将center的width：100%实现自适应，left和right会跳到下一行。
通过设置margin-left：为负值，让left和right上去，与center在同一行。
通过设置父容器container的padding-left 和padding-right让两边留出空隙
使用相对定位让left和right移动到两边
不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+200=400px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。200+200+200=600

1.DOM

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

    
   
    body {
  min-width: 600px;
}

#container {
  padding-left: 200px;
  padding-right: 200px;
}

#container .column {
  float: left;
  text-align: center;
}

#center {
  width: 100%;
  background-color:cornsilk;
  height: 200px;
}

#left {
  width: 200px; 
 margin-left: -100%;
  position: relative;
  left: -200px;
  height: 200px;
  background-color: aquamarine;
}

#right {
  width: 200px; 
  margin-left: -200px;
  height: 200px;
  position: relative;
  right: -200px;
  background-color: blue;
}

#footer {
  clear: both;
  text-align: center;
  background-color: #ccc;
}
#header {
  text-align: center;
  background-color: #ccc;
}

缺点：

center 部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
如果其中一列内容高度拉长，其他两列的背景图片不会自动填充。（如下）

双飞翼布局

在这里插入图片描述分析：
先将main部分放好，然后再将“翅膀”移动到相应的位置。

main放在dom的最前面，紧接着是left、right
将main铺满width:100%
三部分都是float:left
这时将left拉上去margin-left：-100%，同理right使用margin-leftt:-200px。一直到这里都和圣杯布局很类似。
main被占满了，除了使用container的padding（圣杯），还可以给main增加一个内层div包裹，添加margin: 0 220px 0 220px

<div class="container">
    <div class="main">
    	<div class='inner'></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>


.main {
    float: left;
    width: 100%;
    height: 200px;

}

.left {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
}

.right {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -200px;
    background-color: blue;
}

.inner {
    margin: 0 220px;
    height: 200px;
    background-color: green;
}

等高布局

为了解决圣杯布局第二个缺点，出现等高布局。

设置一个大数值的 padding-bottom,再设置相同数值的负的 margin-bottom,并在所有列外面加上一个容器,并设置 overflow:hidden 把溢出背景切掉。

注意不同点：left 、right height数值跟center不一样但是能和center高度一样


body {
  min-width: 600px;
}

#container {
  padding-left: 200px; 
  padding-right: 200px;
  overflow: hidden;
}

#container .column {
  float: left;
  text-align: center;
  padding-bottom: 100000px;
  margin-bottom: -100000px;
  
}

#center {
  width: 100%;
  background-color:cornsilk;
  height: 600px;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
  height: 200px;
  background-color: aquamarine;
}

#right {
  width: 200px; 
  margin-right: -200px; 
  height: 200px;
  background-color: blue;
}

#footer {
  clear: both;
  text-align: center;
  background-color: #ccc;
}
#header {
  text-align: center;
  background-color: #ccc;
}

      <div id="header">头部</div>
      <div id="container">
        <div id="center" class="column">中间
          <br>q
          <br>q
          <br>q
          <br>

          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q 
          <br>q
          <br>q
          <br>q
          <br>q
          <br>
          <br>
          <br>q
          <br>q
          <br>q
          <br>q
          <br>q
        </div>
        <div id="left" class="column">左边</div>
        <div id="right" class="column">右边</div>
      </div>
      <div id="footer">脚部</div>

在这里插入图片描述

粘连布局

footer紧跟mian下面或mian长度不够时在屏幕最下面
在这里插入图片描述

<div id="wrap">
        <div class="main">
          mian <br>
          main <br>
          mian <br>
          main <br>
          mian <br>
        
          main <br>
          mian <br>
          main <br>

          mian <br>
          main <br>
          mian <br>
          main <br>
          mian <br>
          main <br>
          mian <br>
          main <br>
          mian <br>
          main <br>
          mian <br>
          main <br>
          mian <br>
          main <br>
          mian <br>
          main <br>
          mian <br>
          main <br>
        </div>
      </div>
      <div id="footer"> footer</div>

 * {
        margin: 0;
        padding: 0;
      }
      html ,body{
        height: 100%;
      }
      #wrap {
        min-height: 100%;
        background: rgb(201, 231, 69);
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer{
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

参考来源：

常见几种CSS布局