现代商品详情页应使用flex或grid布局替代float，因float易导致塌陷、错位和响应失效；图片侧设固定宽+max-width:100%，文字侧用flex:1；价格与按钮需独立语义化容器并预留JS控制接口。
别用 float 做商品详情页主布局——它已经过时，且极易引发对齐错乱、高度塌陷、响应失效等问题。现代商品详情页应直接采用 display: flex 或 display: grid，float 仅保留在图文环绕等极少数场景中。
为什么 float 在商品详情页里大概率出问题
浮动本质是让元素脱离文档流，但商品详情页的图片+文字结构需要稳定的空间占位和可预测的对齐行为。float 不会自动撑开父容器高度，一旦没做清除（::after / overflow: hidden），整个容器就“塌”了，导致后续价格区、按钮区错位甚至消失。
- 常见错误现象：
商品图右侧文字跑到底部、价格区块被上浮的图片盖住、移动端切换时文字突然换行错位 -
float的宽度计算依赖内容，默认不收缩也不自适应，而商品描述常含不定长文本、动态插入的ul或h2，极易破坏预设列宽 - Flex 布局能天然处理
max-width: 100%图片的缩放约束，float下必须额外加width+height: auto+ 清除逻辑，冗余且易漏
flex 实现左右结构的关键写法
核心不是“怎么让图浮动”，而是“怎么让容器理性分配空间”。父容器用 display: flex，图片侧固定视觉宽度，文字侧用 flex: 1 自适应，这是最稳的组合。
- 图片容器必须设
width: 480px（或你设计稿的基准值），同时加max-width: 100%和height: auto，否则小屏下必然溢出 - 文字区域用
flex: 1，不是flex: 1 1 auto—— 后者在某些旧版 Safari 中有兼容问题；纯flex: 1足够保障伸缩性 - 避免给图片外层套多余
div，每多一层嵌套都可能引入意外margin或padding，直接把img放在flex子项里最干净 - 若描述内含
h2、p、ul混排，统一重置首元素margin-top: 0，否则h2会顶破上边距，造成视觉断层
移动端切 column 方向的坑点
用 @media (max-width: 768px) 切换 flex-direction: column 是标准做法，但很多人忘了重置图片宽度——它仍保持 width: 480px，结果在手机上横向滚动。
立即学习“前端免费学习笔记（深入）”；
- 务必在媒体查询内为图片加
width: 100%，覆盖掉桌面端的固定值 - 文字区不需要改
flex值，flex: 1在 column 下依然生效，只是变成“占满剩余高度” - 如果价格和购买按钮也放在该 flex 容器内，它们会自然下移；但更推荐把它们单独抽成语义化容器（如
<section class="price-action"></section>），便于 JS 控制库存状态 - 别用
float: left+clear: both模拟 column 效果——那是退化方案，无法响应式，且禁用态按钮在 iOS 上仍可点击
价格与按钮必须独立容器的原因
价格和购买按钮不是装饰，是用户决策链终点。它们需要被 JS 动态控制（如库存为 0 时禁用按钮、灰掉价格），而这种控制依赖 DOM 结构的确定性。
- 必须包在同一个父容器里，比如
<div class="price-action">，不能一个在 <code>div.product-desc里，另一个在div.footer里 - 价格数字（如
¥199）要单独包裹，例如<span class="price-amount">¥199</span>，方便后续加动画或对接后端价格接口 - 按钮必须带
type="button"，不是type="submit"—— 商品页极少是表单，误触submit会导致页面刷新或跳转 - 禁用态要用
pointer-events: none+cursor: not-allowed，只靠opacity: 0.5不够，iOS 键盘弹起时仍可能触发点击
真正难的不是写对 flex，而是克制住“再套一层 div 来微调”的冲动。商品详情页的稳定性，来自结构克制和样式收敛，而不是层层嵌套加 hack。
