CSS实现三栏式布局的五种方式

公用的高度和宽度的CSS代码

.w {
      width: 300px;
 }
.h {
      height: 200px;
 }

1.浮动式布局

• html中的代码如下

<div class="left w h"></div>
<div class="right w h"></div>
<div class="center h"></div>

• css代码如下

.left {
         float: left;
         background-color: red;
 }
.right {
         float: right;
         background-color: green;
 }
.center {
         background-color: #ccc;
 }

优点：兼容性比较好
缺点：浮动是脱离文档流的,有些时候需要清除浮动，需要很好的处理浮动周边元素的关系

以下html代码为另外四种方法的公用代码

<section class="box">
    <div class="left w h"></div>
    <div class="center h"></div>
    <div class="right w h"></div>
</section>

2.绝对定位布局

.sec2 {
         position: relative;
 }
.sec2 div {
         position: absolute;
 }
.center {
         left: 300px;
         right: 300px;
         background-color: #ccc;
 }
.left {
         left: 0;
         background-color: red;
 }
.right {
         right: 0;
         background-color: green;
 }

优点：快捷，比较不容易出问题
缺点：该布局脱离文档流，所以子元素也必须脱离文档流，因此可使用性比较差

3.flex布局

.box{
        display: flex;
        width: 100%;
 }
.center{
        flex:1;
        background-color: #ccc
 }
.left{
        background-color: red;
 }
.right{
        background-color: green;
 }

优点：非常有效的解决了浮动和绝对定位的问题，去掉以知高度仍然可用
缺点：兼容性比较差(css3的属性)，不兼容IE8及以下

4.表格布局

.box{
       display: table;  
       width: 100%;
 }
.box div{
       display: table-cell;
 }
.center{
       background-color: #ccc; 
 }
.left{
       background-color: red;
 }
.right{
       background-color: green;
 }

优点 :兼容性非常好，补缺了flex布局兼容的问题
缺点 :操作繁琐，当三栏中其中某一栏高度超出时，其他两栏的高度也会自动跟着调整(不符合某些场景)

5.网格布局

.box{
       display: grid;          
       width: 100%; 
       grid-template-columns: 300px auto 300px;
}
.center{
       background-color: #ccc; 
}
.left{
       background-color: red;
 }
.right{
       background-color: blue;
 }

优点：新技术，简洁明了
缺点：兼容性差