浮动元素撑不开父容器时，应优先用 overflow: hidden 或 auto 触发 bfc；左右浮动间距不一致需统一 margin 侧向设置；清除浮动后空白由清除元素的盒模型属性引起，应用伪元素并设 height: 0 等属性消除；移动端应避免依赖浮动，改用响应式布局。
浮动元素撑不开父容器怎么办
这是最常遇到的布局断裂问题：float 一加，父 div 高度塌陷，下面的元素直接“浮”上来盖住内容。根本原因不是 CSS 写错了，而是浮动元素脱离了文档流，父容器压根“看不见”它。
实操上优先用 overflow: hidden 或 overflow: auto 给父容器——简单、兼容性好（IE6+）、不额外加标签。别迷信 clear: both 的伪元素方案，除非你明确需要支持 IE7 及更老版本。
- 慎用
overflow: visible（默认值），它不会触发 BFC，无法包裹浮动 - 如果父容器本身需要滚动，用
overflow: auto更安全，避免意外裁剪 -
display: flow-root是现代解法（Chrome 64+/Firefox 58+），但 IE 完全不支持，上线前得查项目兼容要求
左右浮动元素间距不一致怎么调
常见现象是左浮动块和右浮动块看着“不对齐”，左边空隙大、右边紧贴边缘，其实是 margin 折叠 + 浮动方向叠加导致的视觉误差。浮动本身不控制间距，真正起作用的是 margin 和父容器的 padding。
统一边距的关键不是调 float，而是规范外边距策略：所有浮动子元素只设同一侧 margin（比如都设 margin-right），另一侧清零；或者改用 gap + display: flex 替代浮动布局。
- 避免混用
margin-left和margin-right在不同浮动项上，容易因渲染顺序产生偏差 - IE 中
margin双倍问题仍存在（特别是float: left+margin-left），可加display: inline临时修复 - 若必须保留浮动，用
box-sizing: border-box统一尺寸计算基准，减少 padding 干扰
清除浮动后底部多出空白怎么消
用 clear: both 元素或伪类清除浮动后，下方突然多了一截空白，大概率是清除元素的 margin-bottom 或父容器的行高/字体大小在作祟——清除元素虽不可见，但它仍是文档流中的一个块级节点。
最稳做法是把清除逻辑写进父容器的 :after 伪元素，并设 height: 0; visibility: hidden; display: block; clear: both;，彻底隔绝渲染影响。
- 别给清除元素设
margin或padding，哪怕只是 1px 也会暴露 - 如果清除元素是真实 DOM 节点（比如
<div class="clear"></div>），记得在 CSS 里写.clear { height: 0; font-size: 0; line-height: 0; } - Flex 或 Grid 布局下根本不需要清除浮动，该换就换，别硬扛
移动端浮动布局错位怎么兼容
PC 上好好的两栏浮动，到手机上文字换行、图片缩放、视口缩放一叠加，立刻错位甚至重叠。这不是 bug，是浮动对响应式天然不友好——它依赖固定宽高和明确流向，而移动端尺寸和内容长度都是动态的。
真要保浮动，至少做三件事：给浮动元素加 max-width: 100%、用 min-width 设底线宽度、媒体查询中主动取消浮动（float: none）并改用 width: 100% 堆叠。
- 避免对
float元素使用transform: scale()，会破坏清除逻辑 - viewport meta 标签漏写或写错（比如
initial-scale=1.0缺失），会让浮动计算基于错误视口宽度 - 安卓 WebView 旧版本对
float+calc()支持差，能不用就不用
浮动不是不能用，但它的容错边界比想象中窄得多——尤其是当设计稿开始要求“适配折叠屏”或“横竖屏切换”时，那点 margin 差值就会变成布局雪崩的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
