float在搜索结果页仍值得用，因其图文对齐简单、兼容性高、内容驱动稳定；适合缩略图宽高不一、文字行数动态变化的场景，且比flex/grid更可控，尤其需支持IE11时。
float 为什么在搜索结果页还值得用
因为图文列表对齐需求简单、浏览器兼容性要求高，float 比 flex 或 grid 更可控——尤其当缩略图宽高不一致、文字行数动态变化时，float 的“内容驱动”特性反而更稳。
常见错误是强行用 display: flex 去对齐多行等高卡片，结果标题截断不统一、图片被拉伸、IE11 直接白屏。而 float 在这些场景下行为可预测，只要清除得当，就能撑起整页布局。
- 适合搜索结果页这种「主内容流 + 右侧固定广告位」的经典两栏结构
-
float: left对图文混排天然友好，文字自动环绕缩略图，无需额外margin计算 - 移动端适配时，只需在媒体查询里取消
float并设为块级，比重写flex方向更轻量
清除浮动的三种写法，哪一种真能防崩
用 clear: both 是最直接的办法，但必须加在浮动元素之后的**真实 DOM 节点**上，而不是靠伪元素“假装清除”。很多页面看似正常，其实是父容器意外获得了高度（比如有边框或 padding），掩盖了塌陷问题。
真正可靠的写法只有两种：
立即学习“前端免费学习笔记（深入）”；
- 在最后一个浮动子元素后插入空标签：
<div style="clear:both"></div>—— 简单粗暴，兼容所有浏览器，包括 IE6 - 给父容器设置
overflow: hidden或overflow: auto—— 不新增 DOM，但要注意：如果内部有position: absolute元素超出边界，会被裁剪
别用 ::after { content: ""; display: table; clear: both; } 这种“BFC 清除法”，它在某些安卓 WebView 下失效，且一旦父容器设置了 transform，BFC 就不生效了。
图片和文字不对齐？不是 float 的锅，是 line-height 和 vertical-align 没调好
浮动本身不控制垂直对齐，float: left 后，图片默认按基线（baseline）对齐文字，导致下方留白。这不是 bug，是 CSS 行内格式化上下文的正常表现。
解决方法很简单，只改一行：
- 给图片加
vertical-align: top或vertical-align: middle，推荐top，语义清晰、兼容性好 - 确保父容器没有意外的
line-height放大（比如设成2），否则文字行高会把整个浮动块往下顶 - 如果用了
font-size: 0来消灭 inline 元素间隙，记得在子元素里重置字体大小，否则文字不显示
float 布局在现代 CSS 中的存活逻辑
它没被淘汰，只是使用场景变窄了。搜索结果页这类“内容为主、样式稳定、需兼顾老环境”的页面，float 仍是成本最低的方案。真正该警惕的是：把 float 当万能网格用，硬套在需要响应式重排、复杂嵌套或动画过渡的模块里。
容易被忽略的一点是：浮动元素脱离文档流后，其后续兄弟元素的 margin-top 会和前一个非浮动元素计算，而不是紧贴浮动块底部——这个细节在调试间距时经常卡人半天。
