css实现两栏布局，左侧固定宽，右侧自适应的多种方法

请听我讲解。

1. float布局

使用 float 属性实现左侧固定宽度，右侧自适应的布局，具体的CSS样式如下：

.container{
  width: 100%;
  overflow: hidden;
}

.left{
  width: 200px;
  float: left;
  margin-right: 10px;
}

.right{
  overflow: hidden;
}

HTML结构如下：

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

2. flex布局

使用flex布局同样可以实现左侧固定宽度，右侧自适应的布局，具体的CSS样式如下：

.container{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.left{
  width: 200px;
}

.right{
  flex: 1;
}

HTML结构如下：

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

以上两种方法都能够实现左侧固定宽度，右侧自适应的布局的效果。

对于两种方法的具体讲解，我们从以下几个方面进行说明：

1. float布局中，左侧元素使用 float: left; 将其置于左侧，同时设置右侧元素的 overflow 为 hidden，去除右侧元素浮动。

2. flex布局中，我们给父元素（容器）设置 display: flex，使其获得布局的能力；然后，我们给左侧元素设置一个固定像素宽度，右侧元素使用 flex: 1，它就可以自适应剩下的宽度。

当然，上述两种方法仅是实现的方式，对于具体效果，我们还是需要视具体情况而定。

希望这份攻略对您的学习有所帮助。