浮动元素设width:100%会撑满整个父容器而非剩余空间，因其脱离文档流；非浮动兄弟元素需通过overflow:hidden触发bfc或flex布局才能真正填满剩余宽度。

浮动本身不支持“自适应填满剩余宽度”——它只负责脱离文档流并靠边，剩下的空间需要手动预留或触发BFC来响应。 直接给浮动元素设 width: 100% 会撑满整个父容器，不是“剩余宽度”；而让非浮动兄弟元素填满剩余空间，才是实际可行路径。

为什么 float + width: 100% 不等于“填满剩余宽度”

浮动元素一旦设 float: left，就脱离文档流，后续块级元素（如 <div>）会无视它、从左上角开始渲染，除非你干预它的行为。此时若给该兄弟元素设 <code>width: 100%，它仍会占满整行，和浮动元素重叠或被遮盖。

• 常见错误现象：.right 内容被 .left 浮动元素覆盖，或文字挤到浮动元素下方
• 根本原因：普通块级元素默认不为浮动元素“让位”，也不自动计算“剩余宽度”
• 关键区别：“填满父容器” ≠ “填满浮动元素右侧剩余空间”

用 overflow: hidden 触发 BFC 是最轻量的解法

给非浮动的右侧元素加 overflow: hidden，本质是让它创建一个新的块级格式化上下文（BFC），从而自动避开浮动区域、收缩到剩余可用宽度内。这是兼容性好、无需额外 wrapper 的经典方案。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 必须确保该元素是块级（比如 <div>），且未设置 <code>float 或 position: absolute
• 不要只加 overflow: hidden 就完事——如果内容超长又不能换行，会被截断；可改用 overflow: auto 或配合 min-width: 0 防止文本溢出
• 现代替代：用 display: flow-root 更语义清晰，效果一致，但 IE 不支持（2026 年已基本可忽略）

flex 布局下别再用 float

如果你已在父容器用 display: flex，那子元素再设 float 会直接失效——float 在 flex 容器中被忽略。此时应放弃浮动，改用 flex: 1 或 flex-grow: 1。

• 错误写法：.left { float: left; width: 200px; } + .right { flex: 1; } —— float 被丢弃，.left 按 flex 项目默认行为排列，可能宽度失控
• 正确做法：统一用 flex，固定宽用 flex: 0 0 200px，自适应用 flex: 1，并加 min-width: 0 防内容撑破
• 性能提示：浮动布局需手动清除（clear: both），flex 则天然无此问题，DOM 更干净

真正难的不是让右边“看起来填满”，而是确保它在各种内容长度、缩放比例、多语言文本下都不溢出、不换行异常、不破坏父容器高度——min-width: 0 和 overflow-wrap: break-word 这类细节，往往比布局方式本身更容易被跳过。