html+css五种布局

已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。

一、浮动布局

<div class="wrap1">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        浮动布局
    </div>  
</div>

浮动布局的兼容性比较好，但是浮动带来的影响比较多，页面宽度不够的时候会影响布局。

二、绝对定位布局

<div class="wrap2 wrap">
    <div class="left"></div>
    <div class="center">
        绝对定位布局
    </div>
    <div class="right"></div>
</div>

绝对定位布局快捷，但是有效性比较差，因为脱离了文档流。

三、flex布局

<div class="wrap3 wrap">
    <div class="left"></div>
    <div class="center">
        flex布局
    </div>
    <div class="right"></div>
</div>

自适应好，高度能够自动撑开

四、table-cell表格布局

<div class="wrap4 wrap">
    <div class="left"></div>
    <div class="center">
        表格布局
    </div>
    <div class="right"></div>
</div>

兼容性好，但是有时候不能固定高度，因为会被内容撑高。

五、网格布局

<div class="wrap5 wrap">
    <div class="left"></div>
    <div class="center">
        网格布局
    </div>
    <div class="right"></div>
</div>

比较新的一种布局方式，兼容性没那么好。