清除浮动的根本解法是触发bfc，但现代项目应优先使用flex/grid布局；overflow:hidden虽简便可触发bfc，但会裁剪溢出内容，且存在兼容性问题。
父元素设浮动后子元素塌陷更严重
父元素自己也浮动，不会解决子元素浮动导致的塌陷，反而让整个父容器脱离文档流，影响后续布局。这是初学者最容易误用的“解法”。
- 父元素浮动后，它自身不再占据原来位置，兄弟元素会向上顶替——
margin、position: relative等依赖文档流的样式全部失效 - 如果父元素是
.container，且页面还有.footer，浮动后.footer会直接贴到顶部，而不是在它下方 - 响应式断点里，浮动父元素可能在某个宽度下完全消失在视口外，调试时找不到元素不是代码漏写了，而是被“飘走”了
clear: both 只对兄弟元素有效，不闭合父容器
clear: both 是清浮动，不是闭合浮动；它只控制当前元素不与前面浮动元素重叠，对父容器高度计算毫无作用。
- 在最后一个浮动子元素后面加一个
<div style="clear: both"></div>，能防止后续内容上浮，但父容器高度仍为 0 - 若父容器有
border或background-color，你会看到一条细线或一片空白背景——那就是没高度的表现 - 这个方法在 Flex 或 Grid 布局中完全无效，因为
clear对非块级流布局无意义
overflow: hidden 是最简可用方案，但会裁剪溢出内容
给父元素加 overflow: hidden（或 auto、scroll）确实能触发 BFC，让父容器包含浮动子元素。但它不是万能的。
- 如果子元素用了
position: absolute且超出父容器边界，会被直接裁掉——比如下拉菜单、Tooltip、气泡框 - 移动端 ios safari 对
overflow: hidden的滚动链处理不稳定，配合touch-action: pan-y才能避免卡顿 -
overflow: auto在部分旧版 android 浏览器里会意外触发横向滚动条，哪怕内容根本没超宽
BFC 是根本解法，但现代项目该优先用 Flex/Grid
真正理解清除浮动，其实是理解 BFC（块级格式化上下文）如何让容器重新计算高度。但现实中，你不需要手动凑 BFC 触发条件。
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex或display: grid替代浮动布局，父容器天然包含子项，无需任何清除操作 - 如果必须兼容 IE10+，
display: table-cell或display: inline-block也能创建 BFC，但会引入额外的盒模型干扰 - 伪元素
::after清除法（content: ""; display: table; clear: both）依然有效，但仅建议保留在遗留项目中维护
浮动本就不是为布局设计的，它是为文字环绕图片服务的。现在还靠它做栅格，等于拿螺丝刀当锤子——不是不行，但每次敲完都得检查手有没有肿。