左中右布局（左右宽度一定，中间宽度自动填满）

<div class=con>       
	<div class=left></div>
	<div class=right></div>
	<div class="middle"></div>
</div>
<!---->
<style>
    *{
        margin: 0;
    }
    .con{
        width: 100vw;
        height: 100vh;
    }
    
    .left{
        float: left;
        height: 100%;
        width:200px;
        background: red; 
    }
    .right{
        float: right;
        height: 100%;
        width:200px;
        background: green; 
    }
    .middle{
        margin-left: 200px;
        margin-right: 200px;
        height:100%;
        background: blue; 
    }
    .con::after{/*消除浮动*/
        content: '';
        display: block;
        visibility: hidden;
        clear: both
    }
</style>

效果图：