面试常问的CSS三栏布局 五种布局总结

CSS三栏布局（假设高度已知，左右两栏固定宽度，中间自适应）

一、五种布局（float，absolute，flex，table，grid）
1.浮动布局
注：middle写在最后
html:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle">我是三栏布局的中间布局 宽度自适应</div>
</div>

css样式：

*{
    margin:0;
    padding:0;
}
.container{
    min-height:100px;
}
.left{
    width:200px;
    background-color:red;
    float:left;
}
.right{
    width:200px;
    background-color:yellow;
    float:right;
}
.middle{
    background-color:green;
}

2.绝对布局

<div class="container">
    <div class="left"></div>
    <div class="middle">
    我是三栏布局的中间栏 宽度自适应
    </div>
    <div class="right"></div>
</div>

css：

*{
    margin:0;
    padding:0;
}
.container div{
    min-height:100px;
    position:absolute;//三栏全部绝对定位
}
.left{
    left:0;
    width:300px;
    background-color:red;
}
.middle{
    left:300px;
    right:300px;
    background-color:yellow;
}
.right{
    right:0;
    width:300px;
    background-color:blue;
}

3.flexbox
html:

<div class="container">
    <div class="left"></div>
    <div class="middle">我是三栏布局的中间栏</div>
    <div class="right"></div>
</div>

css:

*{
    margin:0;
    padding:0;
}
.container{
    display:flex;
}
.left{
    width:300px;
    background:red;
}
.middle{
    flex:1;
    background:yellow;
}
.right{
    width:300px;
    background:blue;
}

4.表格布局
html:

<div class="container">
    <div class="left"></div>
    <div class="middle">
    我是三栏布局的中间栏 宽度自适应
    </div>
    <div class="right"></div>
</div>

css:

*{
    margin:0;
    padding:0;
}
.container{
    width:100%;
    height:100px;
    display:table;
}
.container div{
    display:tabel-cell;
}
.left{
    width:300px;
    background:red;
}
.middle{
    background:yellow;
}
.right{
    width:300px;
    background:blue;
}

5.网格布局
html:

<div class="container">
    <div class="left"></div>
    <div class="middle">
    我是三栏布局的中间栏 宽度自适应
    </div>
    <div class="right"></div>
</div>

css:

*{
    margin:0;
    padding:0;
}
.container{
    display:grid;
    width:100%;
    grid-template-rows:100px;
    grid-template-columns:300px auto 300px;
}
.left{
    background:red;
}
.middle{
    background:yellow;
}
.right{
    background:blue;
}

二、五种布局各自的优缺点
1）浮动布局
优点：简单，兼容性好
缺点：浮动元素脱离文档流，需要做清除浮动，会带来很多问题，如高度坍塌。
2）绝对布局
缺点：元素脱离文档流，下面的子元素也脱离文档流，可用性差
3）flex布局
优点：是css3新出的，目的为解决上面两种布局的局限性，是目前比较完美的一种布局
缺点：不能兼容IE8及以下浏览器
4）表格布局
优点：兼容性好，简单方便使用，当flex兼容性不好时，可以尝试用表格布局
缺点：当其中一个单元格超出时，两侧的单元格高度会随之变化，有时这种不是我们想要的
5）网格布局
一种新布局，好用但兼容性不太好
三、如果把高度已知这一条件去掉，五种布局会有说明变化？
float:

absolute：

flex:

table:

grid:

综上：
flex和table布局是不变的,其他三种出现了问题，需进一步改进。
四、延伸思考