实现一个左右布局，左边固定宽度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

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