前言
左右布局算是非常简单的布局方法了，但却挺常用的。因此实践的第一个布局就是左右布局，并且会分开三种不同的布局方式，加深我们对这三种方法的掌握。
如果想了解掌握本文所说的传统模型、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;
}
布局有千万种方式，一种方式也有千万种完成方法，如果有什么疑问的地方可以随时指出，谢谢！
