浮动容器拉伸到全屏时，应设置 max-width 并配合 margin: 0 auto 居中；若父容器为 flex 或 text-align: center，则需改用 width + margin 显式控制；同时添加 word-break: break-word 防止内容溢出，并避免 width: 100% 与 max-width 混用。
浮动容器拉伸到全屏怎么办
宽屏下 float 容器自动撑满父级、文字被拉得稀疏难读，根本原因是浮动元素本身不参与常规流宽高计算，而它的父容器又没设限——直接加 max-width 就行，但必须配合居中逻辑，否则会左贴边。
- 只加
max-width不加margin: 0 auto，容器仍靠左对齐，右边大片留白 - 如果父容器是
display: flex或text-align: center，margin: 0 auto可能失效，得换用width+margin显式控制 - 别用
width: 100%+max-width组合，width: 100%会让它优先占满，max-width形同虚设
float 元素内部内容溢出导致容器变形
即使容器加了 max-width，里面一个没约束的长单词或 URL 还是会把容器顶宽，尤其在 Safari 和旧版 Chrome 中更明显。
- 给浮动容器加
word-break: break-word或overflow-wrap: break-word - 避免对
float子元素单独设white-space: nowrap，除非你真需要强制不换行 - 图片没设
max-width: 100%也会突破容器边界，记得统一处理
兼容性与现代替代方案要不要切
纯为防拉伸加 max-width 没问题，所有浏览器都支持；但如果你还在用 float 做整体布局（比如多栏），就该警惕了——IE11 虽支持 float，但 clear 行为在缩放时容易错位，Flex/Grid 才是稳解。
- 仅用于文字环绕图片等小场景？
float+max-width完全够用 - 用
float实现三栏布局？现在切到display: flex或grid能省掉 80% 的 hack - 要兼容 IE10 及以下？那
max-width得配合zoom: 1触发 hasLayout，不然某些情况下不生效
居中后右侧滚动条触发重排怎么办
加了 margin: 0 auto 后，页面出现垂直滚动条，导致容器宽度微调、左右晃动——这是因为滚动条占用了视口宽度，auto 计算基准变了。
立即学习“前端免费学习笔记（深入）”；
- 全局加
html { overflow-y: scroll }强制保留滚动条空间，避免动态出现 - 或者用
margin-left: calc(50% - (var(--container-width) / 2))替代margin: 0 auto，前提是宽度确定 - 别依赖
float容器自身居中来对齐内部元素，容易和text-align冲突，该用text-align: center的地方就直接用
真正麻烦的不是加 max-width 这一行代码，而是它背后牵扯的清除浮动、行内元素基线、视口缩放响应这些隐性依赖——改完记得在 125% 缩放和 4K 屏下手动拖动窗口试一遍。
