无需浮动的CSS两栏布局求助：右侧自适应内容左侧占剩余空间

嘿，作为HTML/CSS新手能想到用浮动+overflow:auto来实现这个自适应两栏布局，已经很厉害啦！这个方法确实能达到你想要的效果——原理是右侧div浮动后脱离文档流，左侧div通过overflow:auto触发BFC（块级格式化上下文），从而自动占据剩余空间。不过现在有更简洁、更易维护的现代布局方案，我给你分享两种常用的：

Flexbox是目前前端布局的首选方案，代码简洁，布局行为也更可控，完全不需要操心浮动带来的各种小问题。

<!DOCTYPE html>
<html>
<head>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: flex;
      height: 100%;
    }
    .left {
      flex: 1; /* 直接让左侧占据容器剩余的所有空间 */
      background: #f0f0f0;
      padding: 10px;
    }
    .right {
      background: #e0e0e0;
      padding: 10px;
      /* 不需要手动设置宽度，自动适配自身内容 */
    }
    .ellipsize {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <p class="ellipsize">这是左侧栏，会占据剩余的所有空间，文本过长时会自动显示省略号</p>
    </div>
    <div class="right">
      <p>右侧自适应内容，我是一段长度不固定的文本</p>
    </div>
  </div>
</body>
</html>

核心逻辑很简单：

• 给父容器设置display: flex，开启Flex布局模式
• 左侧栏加flex: 1，表示它会吃掉容器里除了右侧栏之外的所有剩余空间
• 右侧栏啥宽度都不用设，默认就会根据自己的内容自动调整宽度，非常灵活

Grid布局原本是为复杂网格场景设计的，但用来实现这种简单的两栏自适应也超方便，代码同样直观：

<!DOCTYPE html>
<html>
<head>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: grid;
      /* 第一列占剩余空间，第二列自适应内容 */
      grid-template-columns: 1fr auto;
      height: 100%;
    }
    .left {
      background: #f0f0f0;
      padding: 10px;
    }
    .right {
      background: #e0e0e0;
      padding: 10px;
    }
    .ellipsize {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <p class="ellipsize">这是左侧栏，会占据剩余的所有空间，文本过长时会自动显示省略号</p>
    </div>
    <div class="right">
      <p>右侧自适应内容，我是一段长度不固定的文本</p>
    </div>
  </div>
</body>
</html>

这里的关键是grid-template-columns: 1fr auto：

• 1fr代表第一列（左侧）占据容器中所有可用的剩余空间
• auto代表第二列（右侧）的宽度完全由自身内容决定

最后说回你的浮动方法 #

你的实现是完全有效的，但相比现代布局方案，它有几个小局限：

• 需要理解BFC的触发原理，对新手来说门槛稍高
• 如果后续布局变得复杂，浮动很容易出现 clearfix、布局错乱等问题
• 现代布局方法的代码更直观，后续维护和扩展也更简单

内容的提问来源于stack exchange，提问作者frangulyan