css实现左边固定右边自适应

CSS实现左边固定右边自适应是Web前端开发中较为常用的技能。在页面设计时，我们经常会遇到这样的情况：左侧显示一个导航栏或者菜单栏，右侧根据左侧的宽度进行自适应排版。这时候就需要使用CSS的float属性来设置左侧固定，右侧自适应。

首先，我们需要在HTML中设置两个div元素，一个用于左侧导航栏，一个用于右侧内容。左侧导航栏使用固定宽度，右侧内容使用自适应宽度。

<div class="left">
    ...左侧导航栏的内容...
</div>
<div class="right">
    ...右侧内容...
</div>

接下来，在CSS中设置两个div元素的样式。左侧导航栏使用float:left将其左浮动，设置固定的宽度和高度。右侧内容使用margin-left将其与左侧导航栏分隔开，使用overflow:hidden避免出现超出屏幕范围的问题。

.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #ccc;
}
.right {
    margin-left: 200px;
    overflow: hidden;
}

除此之外，我们还需要在HTML和body中设置宽度和高度为100%以使设置生效。

html,body{
    width: 100%;
    height: 100%;
}

通过上述设置，就可以实现左侧固定，右侧自适应的效果了。不过需要注意的是，当窗口宽度小于左侧固定宽度时，左侧导航栏将会被截断而无法显示完全，因此在设计时需做好相应的响应式设计。