CSS浮动

CSS浮动作为历史悠久的布局技术，在图文混排等特定场景仍有重要价值。然而在现代前端开发中：

优先使用Flexbox/Grid：处理复杂布局

浮动用于特殊场景：文字环绕、传统浏览器支持

清除浮动选择：display: flow-root > clearfix > BFC

动态内容布局：避免固定高度，使用自适应方案

理解浮动的底层机制和问题本质，能够帮助开发者根据实际场景选择最合适的布局方案，构建更加健壮、可维护的页面结构。

父盒高度塌陷解决办法
 

清除浮动（clearfix ）：给父盒添加 clearfix 类，利用伪元素（:after ）生成内容，清除浮动影响，让父盒高度正常计算
​​​​​​​BFC（块级格式化上下文 ）：触发父盒的 BFC 特性（如设置overflow: hidden 、display: inline - block 等 ），使父盒能识别浮动子元素，自动撑起高度，解决塌陷问题，还能避免 margin 重叠等布局 bug 。