浮动元素设固定宽高后内容溢出需设box-sizing:border-box；若仍溢出，应清除浮动并控制overflow；复杂场景建议改用flex或inline-block。
浮动元素设固定宽高后内容溢出怎么办
直接给 float 元素设 width 和 height 很容易导致内容撑破容器，尤其当内部有内边距、边框或字体尺寸变化时。根本原因是默认的 box-sizing: content-box——此时 width 只算内容区，padding 和 border 会额外加进来。
必须显式设置 box-sizing: border-box，让宽高包含内边距和边框：
.float-box {
float: left;
width: 200px;
height: 100px;
padding: 12px;
border: 2px solid #333;
box-sizing: border-box; /* 关键 */
}- 不加
box-sizing: border-box，实际占用宽度 = 200 + 12×2 + 2×2 = 228px - 加了之后，内容区自动压缩，总宽严格保持 200px
- 所有现代浏览器都支持
border-box，无需前缀
用 position 替代 float 实现“伪浮动”布局
当需要更可控的定位（比如脱离文档流后仍保持相对位置），position: absolute 或 position: relative 配合 float 的语义其实是冲突的——float 本身是为文本环绕设计的，而 position 是为精确定位服务的。真要结合，常见做法是：外层用 float 占位，内层用 position 做微调。
例如实现右上角关闭按钮：
立即学习“前端免费学习笔记（深入）”；
.card {
float: left;
width: 300px;
height: 200px;
box-sizing: border-box;
}
.card .close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
}-
.card用float参与行内流布局 -
.close必须在.card上设position: relative才能以它为定位参考 - 否则
absolute会相对于最近的position: relative/absolute/fixed祖先，可能错位
IE8 及以下兼容 float + box-sizing 的写法
IE8 支持 float 和 box-sizing，但需要加 -ms- 前缀；IE7 及以下完全不支持 box-sizing，只能靠 hack 或放弃精确宽高控制。
安全写法（兼顾 IE8+）：
.legacy-float {
float: left;
width: 150px;
height: 80px;
padding: 10px;
-ms-box-sizing: border-box; /* IE8 */
box-sizing: border-box;
}- IE8 下必须写
-ms-box-sizing，只写标准属性无效 - IE7 不识别
box-sizing，此时建议改用表格布局或 JS 动态计算宽高 - 若项目已放弃 IE8 以下，可直接只写
box-sizing: border-box
float 元素设固定宽高后换行失效的修复
浮动元素一旦设了 height，如果内容超出，又没设 overflow，就会出现底部塌陷或后续元素上浮——这不是 box-sizing 能解决的，而是清除浮动和内容溢出的双重问题。
- 确保父容器正确清除浮动：
overflow: hidden或伪元素::after清除 - 内容超长时，配合
overflow: hidden或text-overflow: ellipsis控制显示 - 避免同时设
height和min-height，后者在浮动上下文中行为不稳定 - 更稳妥的做法：用
display: inline-block或 Flex 替代float，尤其在需要固定尺寸时
实际项目中，float + 固定尺寸 + box-sizing: border-box 是可行的，但只要涉及复杂对齐、响应式或内容不可控，就很容易掉进定位和清除浮动的坑里。真正需要“固定尺寸+浮动语义”的场景已经很少了。
