简述实现两栏布局，左边固定，右边自适应，左右不重叠 ？

实现两栏布局，左边固定，右边自适应，且左右不重叠，有多种方法，这里我会介绍两种常用的方法：使用浮动（float）和使用Flexbox布局。

方法一：使用浮动（float）

HTML结构如下：

<div class="container">
    <div class="left">左侧固定宽度</div>
    <div class="right">右侧自适应宽度</div>
</div>

CSS样式如下：

.container {
    width: 100%;
    overflow: auto;  /* 用于清除浮动 */
}

.left {
    float: left;
    width: 200px;  /* 左侧固定宽度 */
    background-color: #f00;
}

.right {
    margin-left: 200px;  /* 右侧左边距等于左侧宽度，实现右侧自适应 */
    background-color: #0f0;
}

方法二：使用Flexbox布局

HTML结构相同：

<div class="container">
    <div class="left">左侧固定宽度</div>
    <div class="right">右侧自适应宽度</div>
</div>

CSS样式如下：

.container {
    display: flex;
}

.left {
    width: 200px;  /* 左侧固定宽度 */
    background-color: #f00;
}

.right {
    flex-grow: 1;  /* 右侧自适应宽度 */
    background-color: #0f0;
}

这两种方法都可以实现两栏布局，左边固定，右边自适应，且左右不重叠。其中，浮动方法需要注意清除浮动，而Flexbox布局则更加简洁，且兼容性也很好。你可以根据自己的需求和场景选择合适的方法。