浮动元素宽高由内容决定，未设尺寸时收缩包裹内容，父容器易高度塌陷；需用clearfix或BFC解决；margin不合并但需防溢出；混用布局时易错位，现代开发推荐Flex或Grid替代。
浮动元素的宽高计算在CSS布局中容易引发意料之外的结果，尤其在未明确设置尺寸或与其他布局方式混用时。掌握其行为特点能有效避免布局错乱。
浮动元素默认根据内容决定尺寸
当没有设置width和height时，浮动元素的宽高由其内容决定：
- 块级元素浮动后会“收缩包裹”内容，不再占据父容器整行宽度
- 高度仅包含内容、内边距和边框，不包括外边距（margin）的塌陷问题
- 文字、图片等内容直接影响实际尺寸，图片未设宽高可能导致容器撑开过大
父容器可能无法正确包含浮动子元素
这是浮动布局中最常见的问题：父元素高度塌陷。
- 父容器在正常文档流中，若子元素全部浮动，父元素可能视为“无内容”，高度为0
- 解决方法包括：触发BFC（如 overflow: hidden）、使用清除浮动（clear: both）或伪元素清除法
- 推荐使用伪元素方式避免溢出截断内容：
.clearfix::after { content: ""; display: table; clear: both; }
浮动元素的盒模型计算需注意边距叠加
浮动元素之间的垂直间距不会像普通块元素那样发生外边距合并。
立即学习“前端免费学习笔记（深入）”；
- 水平方向的margin始终不会合并，左右外边距需手动控制避免溢出容器
- 若多个浮动元素总宽度超过父容器，会换行甚至脱离预期布局
- 建议显式设置box-sizing: border-box，便于控制尺寸包含内边距和边框
与其他布局混合时行为复杂
浮动与inline-block、flex等共用时可能出现对齐异常。
- 非浮动元素可能无视浮动元素占据的空间，导致重叠
- 行内元素会围绕浮动元素排列，但块级非浮动元素可能被“挤开”
- 现代开发建议：优先使用Flex或Grid布局替代浮动实现整体结构
基本上就这些。虽然浮动曾是主流布局手段，但现在主要用于特定场景（如文字环绕图片）。理解其宽高计算逻辑有助于维护旧项目或处理特殊排版需求。
