页面布局

题目：高度已知，三栏布局，左右栏宽为300px，中间自适应

结构

 <section class="layout">
        <article class="left-right-center">
            <div class="left">1</div>
            <div class="center">2</div>
            <div class="right">3</div>
        </article>
    </section>

（1）浮动布局

优点：兼容性较好   

缺点：脱离文档流，若清除浮动 和周边环境  处理不好会带来问题

.left{          

float: left;

width: 300px;

}
.right{

float: right;

width: 300px;
}

（2）绝对定位

优点：快捷

缺点：父元素脱离文档流，其子元素所有也脱离文档流，可使用性较差

.left-right-center{
    position: absolute;
} 
.left {
    left: 0;
    width: 300px;
}
.right {
    right: 0;
    width: 300px;
}
.center {
    left: 300px;
    right: 300px;
}

（3）flexbox布局

优点：解决了浮动和绝对定位的缺点（脱离文档流），高度不知也可实现

缺点：兼容性不好ie8以下

.left-right-center{
    display: flex;
} 
.left {
    width: 300px;
}
.right {
    width: 300px;
}
.center {
    flex: 1
}

（4）table表格布局

优点：兼容性好，高度不知也可实现

缺点：某一单元高度被撑开，其他两个高度也会被撑开，如要解决可用BFC

.layout {
    width: 100%;
    display: table;
    height: 100px;
}
.left-right-center > div {
    display: table-cell;
}
.left {
    width: 300px;
}
.right {
    width: 300px;
}

（5）gird 网格布局

优点：新出的技术

.left-right-center {
    display: grid;
    width:100%;
    grid-template-rows:100px;  行
    grid-template-columns:300px auto 300px;  列
}