css左右布局（传统模型、flex、grid）

前言

左右布局算是非常简单的布局方法了，但却挺常用的。因此实践的第一个布局就是左右布局，并且会分开三种不同的布局方式，加深我们对这三种方法的掌握。

如果想了解掌握本文所说的传统模型、flex、grid布局，可以看看上一篇文章：
传统模型、Flex和Grid布局

左右布局顾名思义指网页大体的设计为左右两边的布局方式，具体分左固定右自适应或者左自适应右固定，因此我们选其中一个左固定右自适应的布局实践，具体实现如下：

左右布局实现

---

HTML

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

消除浏览器默认：

html,body{
    padding: 0;
    margin: 0;
}

---

传统模型

浮动布局

    .left {
        float: left;
        width: 200px;
        height: 500px;
        background: #ff0;
    }
            
    .right {
        border-left: 200px solid #999;/*界线，margin-left同样可以*/
        height: 500px;
        background: #f0f;
    }

BFC布局

            .left{
                float: left;/* 同样 position:absolute也可以*/
                width: 200px;
                height: 500px;
                background: #ff0;
            }
            .right{
                overflow:hidden;
                height: 500px;
                background: #f0f;
            }

flex布局

            main{
                display: flex;
                height: 500px;
                flex-flow: row nowrap;
            }
            .left{
                width: 200px;
                background: #ff0;
            }
            .right{
                flex: 1;
                background: #f0f;
            } 

grid布局

            main{
                display: grid;
                height: 500px;
                grid-template-columns: 200px 1fr;
            }
            .left{
                background: #ff0;
            }
            .right{
                background: #f0f;
            } 

布局有千万种方式，一种方式也有千万种完成方法，如果有什么疑问的地方可以随时指出，谢谢！