浮动元素脱离文档流，不再为父容器撑高且不影响块级兄弟元素垂直位置；块级兄弟元素“上移”、内联内容“环绕”；父容器高度塌陷是规范行为，修复方式包括触发BFC、清除浮动或改用Flex/Grid。

浮动元素为什么不再占据文档流位置

因为 float 的本质是让元素“脱离普通流（normal flow）”，同时触发其父容器的 BFC（块级格式化上下文）缺失，导致父容器无法感知浮动子元素的高度。此时，浮动元素仍参与行内布局计算（比如文字环绕），但不再为父容器提供高度撑开，也不影响后续块级兄弟元素的垂直定位位置。

浮动后兄弟元素为什么会“上移”或“环绕”

这取决于兄弟元素的类型：

• 如果是 <p></p>、<div> 这类块级元素，默认会忽略浮动元素的占位，从浮动元素的起始垂直位置继续向下布局（看起来像“上移”了） <li>如果是文本内容或 <code>inline 元素，则会自动绕开浮动区域，在剩余空间中排布（即“文字环绕”效果）
• 若想阻止环绕，可用 clear: both 或触发 BFC（如 overflow: hidden）

为什么父容器高度塌陷？怎么修复

父容器塌陷不是 bug，而是符合规范的行为：当所有子元素都浮动后，它们都不再属于文档流，父容器“看不见”它们，自然高度为 0。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

常见修复方式（按推荐顺序）：

立即学习“前端免费学习笔记（深入）”；

• 给父容器设置 overflow: hidden 或 overflow: auto —— 触发 BFC，使其包含浮动子元素
• 在最后一个浮动子元素后添加清除元素：<div style="clear:both"></div>
• 使用伪元素清除（更现代）：

   .parent::after { content: ""; display: table; clear: both; }

• 用 display: flex 或 display: grid 替代 float 布局（推荐新项目）

float 在现代布局中的实际风险

虽然 float 仍被支持，但在响应式、复杂嵌套或需要垂直居中的场景下极易出错：

• 浮动元素的 margin 可能发生双倍合并（IE6 经典 bug）
• 与 position: absolute 混用时，脱离流的叠加逻辑难预测
• Flexbox 和 Grid 已原生支持多列、对齐、换行等需求，float 仅适合纯图文环绕等极少数遗留场景
• 部分 CSS 重置库（如 Normalize.css）会默认清除浮动，可能掩盖问题

真正理解 float 的价值，不在于复用它，而在于看懂老项目里那些“莫名消失的父容器高度”和“文字突然贴到图片左边”的根源。