今天被新来的实习生气笑了，一个左边图片右边文字的简单布局，愣是让他把盒子叠成了俄罗斯方块。行，干脆撸起袖子录一期浮动教学，从零开始整！
第一步：先刨个坑看看原始状态
直接甩三个带图的卡片盒子出来，啥样式都不加。不出所料，三个死脑筋竖着排排站，跟小学生升旗似的。这时候就该浮动出场了，掏出代码给每个盒子加个float: left，嚯，效果立竿见影！仨盒子立马贴边并排蹲好了。
第二步：踩坑大戏准时上演
刚嘚瑟不到两秒，问题来了。给它们亲爹（也就是外层盒子）加个粉色背景，背景居然消失得无影无踪！一查文档，好家伙，浮动的崽不占位置，亲爹直接缩水成纸片了。赶紧试了手绝活——给亲爹加个overflow: hidden，就跟变魔术似的，粉背景唰地冒出来了。
第三步：间距失控现场救援
并排是并排了，但盒子们挤得脸贴脸喘不过气。我反手塞个margin-right: 20px，右边倒是空开了，可一个盒子被顶到下一行去了！算数不会骗人：三个盒子宽300px，间距20pxx2，总宽得340px，结果亲爹宽度卡死在320px。立刻抄计算器重设盒子宽度：(320-40)/3≈93.333px，小数点都懒得抹，直接填上去，这回终于整整齐齐码好了。
第四步：清除浮动防暴走
还没完！在卡片堆底下加个版权声明，结果那行字偷偷摸摸蹭到卡片旁边去了。气得我反手给声明加个clear: both，这下小样儿总算乖乖蹲到底部，彻底消停了。
- 浮动是跟遛狗似的拽元素去左边右边
- 浮动的崽不占坑 亲爹记得overflow:hidden或伪元素清除
- 并排的算总账 得把margin/padding宽度全塞进父容器
- 后续元素被带歪 直接clear:both教做人
页面稳定得跟焊死在地板上一样。实习生端着奶茶过来瞅了眼屏幕："噢~原来这么回事"，鬼知道他到底悟没悟。
