css左侧浮动 右侧自适应

CSS 中有一个非常实用的属性 —— 浮动（float）。浮动可以让元素脱离文档流，并且向左或者向右浮动。而且，浮动元素可以实现文字环绕效果，使得页面更加美观。

为了更好地讲解浮动属性的使用，本文将以一个例子来说明。我们要实现一个布局，左侧是一个固定宽度的导航栏，右侧是一个自适应宽度的内容区域。

<div class="wrapper">
  <div class="sidebar">
    <ul>
      <li><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li><a href="#">导航3</a></li>
      <li><a href="#">导航4</a></li>
    </ul>
  </div>
  <div class="content">
    <p>这里是内容区域。</p>
  </div>
</div>

上面的代码中，我们使用了一个 wrapper 来包裹整个布局，而左侧导航栏使用了一个 sidebar 类，右侧内容区域使用了一个 content 类。

.wrapper {
  overflow: hidden;
}
.sidebar {
  float: left;
  width: 200px;
  background-color: #f0f0f0;
}
.content {
  margin-left: 200px;
  background-color: #fff;
}

在 CSS 中，我们可以使用 float 属性来实现浮动。而且，我们需要给左侧导航栏设置一个固定宽度，同时右侧内容区域也需要设置一个左边距，使得内容不会被遮挡。最后，我们使用 overflow 属性来清除浮动，使得 wrapper 元素可以包裹整个布局。

通过以上步骤，我们就可以实现一个左侧浮动，右侧自适应的布局效果。这种布局方式非常常见，如果你学会了浮动这个属性，就可以轻松实现这种布局。