经典布局题-左边固定右边自适应的几种做法和解释

实现一个左右布局，左边固定宽度200px，右边实现宽度自适应的两列布局

下面分享下我的几种做法以及解释

首先我们先通用的布局样式：

<div>
     <div class="fixed">固定200px</div>
     <div class="auto">自动充满</div>
</div>

来个默认样式：

.fixed{
    width: 200px;
    height: 100px;
    background: blueviolet; // 紫色
}
.auto{
    background: goldenrod; // 黄色
    height: 100px;
}

接下来在这个基础上一 一列举几种做法：

1. float

<div>
    <div class="fixed l1">固定200px</div>
    <div class="auto r1">自动充满</div>
</div>

.l1{
    float: left;
}
.r1{
    width: 100%;
    padding-left: 200px;
    box-sizing: border-box;
}

（给两个div添加两个类名 l1，r1，表示这是第一种做法）
由于 左边l1 浮动，脱离了正常流的规则，右边r1是个块级元素，所以会“无视”左侧的浮动，直接向父级的左侧靠拢，然后我们再加个padding-left: 200px;把内容推出来即可

效果图（包括以下几种方法的效果都是这样）：

2. 负margin

<div class="con-2">
   	<div class="fixed l2">固定200px</div>
    <div class="auto r2">自动充满</div>
</div>

.con-2{
    font-size: 0;
}
.l2{
    display: inline-block;
    font-size: 1rem;
    position: relative;
}
.r2{
    display: inline-block;
    width: 100%;
    margin-left: -200px;
    padding-left: 200px;
    box-sizing: border-box;
    font-size: 1rem;
}

（给父盒子添加一个类名 con-2 ）

首先，设置两个盒子为行块，这样就让他们处于同一行；为了解决中间产生空隙的问题，设置父盒子的字号为0，（空隙是代码换行引起的）；然后我们让右边宽度100%，同时利用margin-left为 -200px强行蹭到左侧去，再用padding-left: 200px;把内容推出来，当然别忘了box-sizing: border-box;。

这时基本就实现了，但是你会发现一个问题，右侧的把左侧覆盖了？！，所以得想办法让左侧的层级高于右侧，肯定有很多人首先想到z-index，但是很可惜，两个都是正常流中的元素，z-index并不起效果。最简单的办法就是让左侧position: relative;，（ 添加了position属性且值不为static的元素比相邻没有position属性的元素层级要高 ），这就大功告成了

3. positon定位

<div class="con-3">
    <div class="fixed l3">固定200px</div>
    <div class="auto r3">自动充满</div>
</div>

.con-3{
    position: relative;
}
.l3{
    position: relative;
    z-index: 1;
}
.r3{
    position: absolute;
    right: 0;
    top: 0; 
    width: 100%;
    padding-left: 200px;
    box-sizing: border-box;
}

（给父盒子添加一个类名 con-3 ）

利用position定位，这个应该不难理解，给左侧 l3添加position: relative; z-index: 1;是因为避免被右侧覆盖了（两个同样设置了position，当左侧 z-index >= 1时，该层级比没有设置z-index的要高）

4. flex

<div class="con-4">
    <div class="fixed l4">固定200px</div>
    <div class="auto r4">自动充满</div>
</div>

.con-4{
    display: flex;
}
.l4{
    flex-shrink: 0;
}
.r4{
    width: 100%;
}

（给父盒子添加一个类名 con-4 ）
利用 flex 应该是最爽最简单的了！我们知道当父盒子宽度不够分时，flex会自动压缩子盒子们，而左侧的flex-shrink: 0;表示我不参与压缩，一直是200px

5. 利用BFC

<div>
	  <div class="fixed l5">固定200px</div>
	  <div class="auto r5">自动充满</div>
</div>

.l5{
    float: left;
}
.r5{
    overflow: hidden;
}

这也是个十分简单的方法，利用BFC特性：BFC的元素不能与浮动元素重叠
由于给右侧加了overflow: hidden;使之变成一个BFC，所以不会和左侧的浮动发生重叠，盒子默认就是撑满屏幕，所以不用手动设置宽度。
还不了解BFC的可以看我另外一边文章：BFC

文中如有错还请大神指出~谢哈