CSS篇 - 三栏布局

css 实现 三栏布局

常见布局方式：
         float布局、position定位、table布局、弹性（flex）布局、网格(grid)布局。
前提是左右宽度(假如左右宽度为300px),整个高度已知(假如高度为100px)，中间宽度自适应.
总结:
         5种实现三栏布局的方式,那么他们的优缺点呢？

1、float布局是现在用的比较多的布局很多门户网站目前使用这个布局方式,使用的时候只需要注意一定要清除浮动。

2、Position布局只是根据定位属性去直接设置元素位置,个人感觉不太适合用做页面布局

3、table布局使用起来方便,兼容性也不存在问题，不利于搜索引擎抓取信息

4、flex布局比较强大,但是还是存在IE上兼容性问题，只能支持到IE9以上

5、grid布局很强大，但是兼容性很差。

1. float 布局

<style>
    .left{
     
        float:left;
        width:300px;height:100px;background:#631d9f;
    }
    .right {
     
        float:right;
        width:300px;height:100;background: red;
    }
    .center {
     
        margin-left:300px;
        margin-right:300px;
        background:green;
    }
    /* 使用了float, 所以为了不影响其他元素的显示这里需要清除浮动 */
    .main:after {
     
        content:"";
        display:block;
        clear:both;
    }
</style