浮动页脚塌陷需清除浮动或触发BFC：用overflow:hidden、clear:both空div或伪元素::after；左右栏不设固定宽，分别float:left/right并预留margin；IE6/7加display:inline修复双倍margin；移动端需检查viewport、min-width和white-space。
浮动导致页脚内容塌陷怎么办
用 float 排版页脚时，父容器高度经常变成 0，右侧链接“掉下去”或和版权重叠——根本原因是浮动元素脱离文档流，父容器无法自动包裹。
解决方法不是加高父容器，而是触发 BFC 或清除浮动：
- 给页脚容器加
overflow: hidden（最轻量，兼容 IE8+） - 在浮动元素末尾加一个空
<div style="clear: both"></div>（语义清晰，但多一层 DOM） - 用伪元素清除：
::after { content: ""; display: table; clear: both; }（推荐，无侵入性）
别用 float: right 单独推右侧链接——一旦左侧版权文字变长，右侧容易换行或错位。
左右两栏宽度不固定时怎么对齐
版权文字长度常变（比如年份更新、公司名变更），右侧链接数量也可能增减，硬写 width: 50% 会出错。
立即学习“前端免费学习笔记（深入）”；
稳妥做法是放弃等宽假设，改用浮动本身的“贴边”特性：
- 左侧版权用
float: left，不设宽度，让它自然收缩 - 右侧链接用
float: right，同样不设宽度，用margin-left预留一点间距 - 确保两者总宽度不超过父容器，否则右侧会被挤到下一行（这是最常被忽略的隐性断行点）
示例结构：
<footer><br> <div class="copyright">© 2024 XYZ Corp.</div><br> <div class="links"><a href="#">隐私</a> <a href="#">条款</a></div><br></footer>对应 CSS 中两个
div 分别 float，而非包在一个 display: flex 里——后者虽现代，但题目限定用浮动。
IE6/7 下浮动元素间隙异常
老版本 IE 对 float 和 inline 元素混排有双倍 margin bug，尤其当页脚里有 <a></a> 或 <span></span> 时，右侧链接可能被顶偏几个像素。
修复关键就一条：display: inline 加在浮动子元素上（不是父容器）：
.copyright { float: left; display: inline; }.links { float: right; display: inline; }
这个 display: inline 不影响布局，只触发 IE 的 hasLayout 修复机制。现代浏览器无视它，所以可安全共存。
移动端浮动失效或错乱
小屏幕下，如果没设 meta viewport 或容器未设 min-width，浮动元素可能因父容器缩得太窄而强行换行——看起来像“浮动失效”，其实是空间不足。
必须检查三处：
- 页面是否包含
<meta name="viewport" content="width=device-width, initial-scale=1"> - 页脚父容器是否设置了
min-width: 320px（或至少min-width: fit-content） - 浮动元素是否用了
white-space: nowrap防止内部文本折行（尤其版权里的长公司名）
浮动本身在移动端完全可用，问题几乎都出在响应式基础缺失，而不是浮动过时了。
浮动做页脚排列，核心就三点：清浮动、不锁宽度、防折行。细节都在容器尺寸和子元素显示模式里，不在浮动本身。
