浮动布局中响应式隐藏某列有三种方式：一是用display: none（最简，彻底移除元素）；二是float: none + width: 100%（保留结构，退化为块级排列）；三是切换为flex布局（推荐长期方案，用display: none真正退出布局）。

在浮动布局（float-based layout）中实现响应式隐藏某列，核心思路是：**先用 float 实现多列布局，再通过媒体查询覆盖 float 行为，并配合 display 控制可见性**。但要注意，单纯用 display: none 可能破坏文档流或引发意外空白，而直接切 flex 需谨慎处理结构兼容性。

用 display: none 隐藏浮动列（最简方案）

适用于结构简单、不依赖浮动列参与高度计算的场景。在媒体查询中对目标列设 display: none，浏览器会彻底移除该元素，其他列自动占满剩余空间（前提是父容器没固定宽度或未触发 BFC 限制）。

• 确保父容器没有 overflow: hidden 或 float 自身，否则可能影响重排
• 若隐藏的是左/右浮动列，剩余列通常会自然撑满，无需额外设置宽度
• 示例：
  @media (max-width: 768px) { .sidebar { display: none; } }

用 float: none + width: 100% 替代隐藏

当需要保留元素结构（比如 SEO、无障碍访问），或隐藏后仍需保留占位时，可取消浮动并设满宽，让它退化为块级流式排列。

• 先清除原有 float：float: none
• 重置宽度：width: 100%（避免残留 float 宽度导致错位）
• 可选：加 clear: both 防止受之前浮动影响
• 适合「隐藏侧边栏，主内容独占一行」这类典型响应式需求

过渡到 flex 布局（推荐长期方案）

如果项目允许重构，建议在小屏下整体切换为 flex，比纯 float 更可控。注意两点：

• 父容器加 display: flex，子项默认横向排列；用 flex-direction: column 切换为竖排
• 要“隐藏”某列，仍优先用 display: none（flex 中它会真正退出布局），而非 visibility 或 opacity
• 避免混用 float 和 flex —— 同一元素上同时设 float 和 flex-item 属性时，float 会被忽略

基本上就这些。浮动布局的响应式隐藏不复杂但容易忽略流式回退的细节，关键是根据是否需要保留 DOM 结构来选 display: none 还是 float: none + width，而 flex 是更现代、更少坑的选择。