CSS 两栏布局

左栏宽度固定，右栏自适应

1. float + margin-left

左侧使用 float ，右侧 margin-left

原理：因为 float 就脱离文档流了，右侧会挤到左侧的位置上，所以需要 margin-left。margin-left要等于 float 的宽度。

<style>
    * { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    div { height: 200px; }
    .left { width: 300px; float: left; background: blue; }
    .right { margin-left: 300px; background: red;  }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

图片说明

2. float + BFC

左侧使用 float，右侧 BFC （如：overflow: hidden）

原理：BFC区域不会与 float box 重叠。

<style>
    div { height: 300px; }
    .left { width: 300px; float: left; background: blue; }
    .right { overflow: hidden; background: red; }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

图片说明

3. Flex布局

<style>
    html, body { height: 100%; margin: 0; }
    div { height: 300px; }
    .container { display: flex; }
    .left { flex: 0 0 200px; background: blue; }
    .right { flex: 1 0 auto; background: red; }
</style>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

图片说明