昨天半夜两点，我还在改一个老客户的手机端页面。老板非说那个导航栏在iPhone 6上对齐有点歪，我盯着屏幕看了半小时，最后发现是float没清除干净导致的塌陷。真的，做我们这行的，谁没被float坑过？那时候刚入行，觉得float是神器，想飘哪就飘哪。现在回头看，全是泪。

很多人问，现在都什么年代了，Flexbox和Grid都普及成这样了，为什么还要聊float？因为你的客户不一定用最新的技术栈，或者他们维护的旧代码里，到处都是float。如果你不懂float的底层逻辑，遇到兼容性问题，你根本修不好。

先说第一个痛点：高度塌陷。这是float最经典的坑。你给两个div设了float: left，父容器的高度瞬间变成0。看着页面乱成一锅粥，子元素全挤在一起。以前我们怎么解决？加个clearfix hack，或者给父容器设个固定高度。但设固定高度在移动端就是找死，屏幕尺寸千奇百怪，你怎么知道父容器多高？

我记得有个做电商的客户，商品列表用float排列。在大屏手机上看着挺正常，一到小屏或者横屏，第二行的商品就跑到第一行后面去了，或者干脆掉下去一大截。客户急得跳脚，说用户体验太差。我检查代码，发现是float没配合clear:both或者overflow:hidden来约束。后来我加了个伪元素clearfix，问题才解决。但这只是治标，治本还得靠理解盒模型。

第二个痛点：文字环绕。float原本是用来让文字环绕图片的。但在移动端，这种效果往往很尴尬。你想让文字绕着图片走，结果图片稍微大一点，文字就被挤得支离破碎，阅读体验极差。特别是那些长篇大论的博客文章，如果图片用了float，手机端阅读起来简直是在受罪。我遇到过一次，客户坚持要用float做图文混排，结果用户停留时间短得可怜。后来我建议改成Flex布局，虽然改动大，但效果立竿见影，用户反馈好多了。

第三个痛点：间距控制难。用float做网格布局时，你想给每个元素加margin，结果一行只能放两个，第三个元素就换行了，而且换行后的间距怎么调都别扭。以前我们得算半天像素，还要处理最后一个元素的margin-right为0的问题。现在想想，那时候真是笨。Flexbox的justify-content和align-items直接就能搞定，还不用管换行后的间距问题。

当然，我不是说float一无是处。它在某些特定场景下，比如简单的两栏布局，或者需要文字环绕的地方，还是很好用的。而且，理解float有助于你理解CSS的盒模型和BFC（块级格式化上下文）。BFC是float的一个副作用，利用BFC可以解决很多布局问题，比如防止margin重叠。

如果你还在用float做移动端的主要布局，我建议你慎重。不是float不好，而是它太“老派”了。现在的移动端开发，更强调响应式和灵活性。Flexbox和Grid能更好地适应各种屏幕尺寸，代码也更简洁易读。

当然，如果你接手的是一个老旧项目，里面全是float，那你也没必要全部重写。你可以局部优化，比如把关键的导航栏和列表改成Flex，其他的保持不变。这样既保证了稳定性，又提升了部分体验。

最后想说，技术一直在变，但解决问题的思路不变。float虽然过时，但它代表的布局思想依然有价值。多看看老代码，多理解底层原理，当你遇到那些奇怪的兼容性问题时，你就能一眼看穿本质。别怕麻烦，多试几次，总能找到最适合的方案。毕竟，客户满意才是硬道理。

本文关键词：移动端网站开发 float