三栏布局

而实现这一布局有多种方法

1.左右绝对定位，中间用margin留出

<!-- html页面 -->  <div id="container">    <div id="left">Left</div>    <div id="right">Right</div>    <div id="main">Main</div>  </div>

//css部分
<style>body,html{        height: 100%;        padding: 0;        margin: 0;        overflow: hidden;    }    /*左右进行绝对定位,脱离文档流*/    #left,#right{        position: absolute;        top: 0;        background: blueviolet;    }    #left{        left: 0;        width: 100px;    }    #right{        right: 0;        width: 100px;    }    /*中间用margin空出左右元素所占的空间*/    #main{        margin: 0 100px 0 100px ;        background: deeppink;
        text-align: center;
     }                                                                    </style>

2、浮动布局： float 浮动固定  margin撑开

<!-- html页面 -->  <div id="container">    <div id="left">Left</div>    <div id="right">Right</div>    <div id="main">Main</div>  </div>

//css部分
 <style>body,html{        height: 100%;        padding: 0;        margin: 0;        overflow: hidden;    }    #left,#right{        background: blueviolet;    }    #left{        float: left;        width: 100px;    }    #right{        float: right;        width: 100px;    }    #main{        margin: 0 100px 0 100px ;        background: deeppink;        text-align: center;    }  </style>

3、flex布局

<!-- html页面 -->  <div id="container">      <div id="left">left</div>      <div id="main">center</div>      <div id="right">right</div>  </div>

<style>    /* css部分 */        #container{            display: flex;        }        #left{            width:200px;            background: blueviolet;        }        #main{            flex: 1;            background: deeppink;        }        #right{            width:200px;            background: blueviolet;        }  </style>

4、圣杯布局

<!-- html页面 -->  <div class="container">      <div class="main col">Main</div>      <div class="left col">Left</div>      <div class="right col">Right</div>  </div>

 /* css部分 */        /* 两边定宽，中间自适用 */        body,html,.container{            height: 100%;            padding:0;            margin: 0;        }        .col{            float: left;   /* 三个col都设置float: left,为了把left和right定位到左右部分 */            position:relative;        }        /*父元素空出左右栏位子: 因为上一步中，左右栏定位成功了，但是中间栏的内容会被遮盖住*/        .container{            padding:0 100px 0 100px;        }        /*左边栏*/        .left{            left:-100px;            width: 100px;            height:100%;            margin-left: -100%;            background: #ff69b4;        }        /*中间栏*/        .main{            width:100%;            height: 100%;            background: #659;        }        /*右边栏*/        .right{            right:-100px;            width:100px;            height:100%;            margin-left: -100px;            background: #ff69b4;        }  </style>

5、双飞翼布局

  <!-- html页面 -->  <div class="container">      <div class="main col ">          <div class="main_inner">Main</div>      </div>      <div class="left col ">Left</div>      <div class="right col ">Right</div>  </div>

<style>    /* css部分 */    body,html,.container{            height: 100%;            padding:0;            margin: 0;        }        .col{             float: left; /* 把left和right定位到左右部分 */        }        .main{             width:100%;            height:100%;            background: #659;        }        .main_inner{             /* 处理中间栏的内容被遮盖问题 */            margin:0 200px 0 100px;        }        .left{            width: 100px;            height: 100%;            margin-left: -100%;            background: #ff69b4;        }        .right{            height:100%;            width:200px;            margin-left: -200px;            background: #ff69b4;        }  </style>

双飞翼布局的好处：

（1）主要的内容先加载的优化。

 （2）兼容目前所有的主流浏览器，包括IE6在内。

 （3）实现不同的布局方式，可以通过调整相关CSS属性即可实现。

关于BFC

 BFC就是一个独立容器 封闭容器，能够使内部与外部隔绝不受影响。 

如何触发BFC （父级）

1.float不为none 

2.overflow不为visibile

3.dispaly为inline-block table-cell flex等等 

4.posittion为absolute或者relative 

 主要用途 :

1，清除浮动 

 2, 解决外边距合并问题 

3，制作右侧盒子自适应问题。 text-align必须在block下才有效。