左侧栏固定 右侧自适应 还记得怎么处理吗

故事：其实这个问题是很古老的事情了，目前很多前端开放都是在研究各种框架，和框架原理，从而忽略了对基本知识的梳理

单浮动布局 + margin-left

 <div class="wrap clearfix">
    	<div class="fl" style="background: red;width: 200px;height: 1000px"></div>
    	<div style="background: #f60;height: 1000px;margin-left: 200px;">123</div>
  </div>

flex布局

  <div style="display: flex;">
    	<div style=" flex: 0 0 200px; background: red;height: 1000px"></div>
    	<div style=" flex: 1; background: #f60;height: 1000px;">123</div>
    </div>

双浮动布局+calc计算

    <div class="clearfix">
    	<div class="fl" style="background: red; width: 200px; height: 1000px"></div>
    	<div class="fl" style="width:calc(100% - 200px);background: #f60;height: 1000px;">123</div>
    </div>

双浮动布局+ margin-left-

  <div class="clearfix">
		<div class="fl" style="width: 200px;background: red;height: 1000px;">
    	
	    </div>
		<div class="fl" style="margin-left: -200px; width: 100%; ">
			<div style="margin-left: 200px; height: 1000px;background: #f60;">123</div>
		</div>
   </div>

双 inline-block布局+calc计算

   <div style="font-size: 0;box-sizing: border-box;">
		<div style="display: inline-block;box-sizing: border-box; background: red; width: 200px;height: 1000px;"></div>
		<div style="width: calc(100% - 200px);display: inline-block; box-sizing: border-box; vertical-align: top; background: #f60; height: 1000px;">123</div>
   </div>

绝对定位布局 + margin-left

   <div style="position: relative;">
		<div style="position: absolute; left:0;top:0; background: red; width: 200px;height: 1000px;"></div>
		<div style=" margin-left: 200px; background: #f60; height: 1000px;">123</div>
    </div>

grid布局

    <div style=" display: grid;grid-template-columns:200px 1fr;align-items: start;">
		<div style="grid-column: 1;background: red; height: 1000px;"></div>
		<div style=" grid-column: 2; background: #f60; height: 1000px;">123</div>
    </div>