css实现双飞翼布局，三列布局，中间宽度自适应，两边定宽--五种方案对比延伸

标题css实现双飞翼布局，三列布局，中间宽度自适应，两边定宽；假设高度固定300px;

html

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

css
(1)、浮动布局（float）

	.container {
      width: 100%;
      height: 300px;
    }
    .container > div {
        float: left;
    }
    .left, .right {
        width: 60px;
        height: 100%;
    }
    .left {
        background-color:red;
    }
    .right {
        background-color:blue;
    }
    .main {
        height: 100%;
        width:calc(100% - 120px);
        background-color:green;
    }

(2)、绝对布局（absolute）

		 .container{
            width:100%;
            height:300px;
            position:relative;
         }
        .container > div{
            position:absolute;
            height:100%;
         }
         
        .left,.right{
           width:100px;
         }
        .left{
            left:0;
            background-color:green;
         }
        .right{
            right:0;
            background-color:blue;
         }
        .main{
           	right:100px;
            left:100px;
            background-color:red;
         }

(3)、flex布局

		.container{
            width:100%;
            height:300px;
            display:flex;
         }
        .container > div{
        	 flex:1;
            height:100%;
         }
         
        .left,.right{
           width:60px;
         }
        .left{
            background-color:green;
         }
        .right{
            background-color:blue;
         }
        .main{
            background-color:red;
         }

(4)table布局

		.container{
            width:100%;
            height:300px;
            display:table;
         }
        .container > div{
            height:100%;
            display:table-cell;
         }
         
        .left,.right{
           width:60px;
         }
        .left{
            background-color:green;
         }
        .right{
            background-color:blue;
         }
        .main{
            background-color:red;
         }

(5) grid网格布局

		.container{
            width:100%;
            display:grid;
            grid-template-rows:300px;//行高
            grid-template-columns:100px auto 100px; //列高 几列设置几列的宽度
         }
 
        .left{
            background-color:green;
         }
        .right{
            background-color:blue;
         }
        .main{
            background-color:red;
         }

延伸：

1. 对比这五种方法的优缺点？
   float:缺点是脱离文档流，下面的子元素也必须脱离文档流，不好控制；优点兼容性好；
   绝对定位：缺点是脱离文档流，下面的子元素也必须脱离文档流，实用性差；优点是快捷
   flex:解决float,绝对定位的问题,比较完美的；但是IE8不支持
   table布局：缺点是历史诟病操控麻烦，对SEO不友好，三栏高度是统一的，跟着变动的，不适用于某些场景；优点是解决float,绝对定位的问题，兼容性好；
   grid:将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了;Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
   Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大
2. 假设固定高度去掉，高度要按三个模块中最高的，哪个方法可以适用？
   float 、绝对定位不再适用；table布局、 flex布局还可以用 网格布局grid需要改变才可以用