CSS两栏布局(左边宽度固定，右边自适应)

CSS两栏布局可以通过多种方式实现，其中一种方法是使用浮动（float）和定位（position）。以下是一个简单的例子，演示如何创建一个左边栏宽度固定，右边栏宽度自适应的两栏布局：

HTML:

<div class="container">
    <div class="left-bar">左边栏</div>
    <div class="right-bar">右边栏内容自适应</div>
</div>

CSS:

.container {
    overflow: hidden; /* 清除浮动 */
}
 
.left-bar {
    float: left; /* 左边栏浮动 */
    width: 200px; /* 左边栏固定宽度 */
    background-color: #f9f9f9; /* 左边栏背景色 */
}
 
.right-bar {
    margin-left: 200px; /* 右边栏留出左边栏宽度的外边距 */
    background-color: #f0f0f0; /* 右边栏背景色 */
}

这个例子中，.left-bar 是左边的固定宽度栏，通过设置 float: left 使其浮动。.right-bar 是自适应宽度的栏，通过设置 margin-left 保证与左边栏的距离，并且右边栏的内容会根据可用空间自动伸缩。通过在 .container 上设置 overflow: hidden 是为了清除浮动，避免影响下面内容的布局。