17370845950

float使元素脱离文档流并左/右浮动，文字环绕其周围，但父容器高度塌陷；修复需触发BFC、空元素清除或伪元素清除。

float 属性的基本行为是什么

float 让元素脱离文档流，向左或右移动，直到碰到父容器边缘或另一个浮动元素的边界。它不改变其他非浮动元素的布局位置（它们会“无视”浮动元素的存在），但文字内容会环绕浮动元素——这是最常被忽略的底层逻辑。

• float: left 和 float: right 是仅有的有效值（float: none 用于清除）
• 行内元素设置 float 后会自动变成块级框（可设宽高、内外边距）
• 浮动元素不会撑开父容器高度，这是布局塌陷的根源

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

父容器内部只有浮动子元素时，其计算高度为 0，因为浮动元素已脱离文档流。常见错误是直接给父容器加 height 硬撑，这不可维护。

修复方式有三种，按推荐顺序：

• 使用 overflow: hidden 或 overflow: auto（触发 BFC，简单有效，但注意可能截断阴影或下拉菜单）
• 在父容器末尾添加一个清除浮动的空元素：

• 用伪元素清除（现代推荐）：

  .clearfix::after { content: ""; display: table; c
  lear: both; }

  ，然后给父容器加 class="clearfix"

float 实现两栏/三栏布局的关键细节

纯 float 布局现在虽被 Flex/Grid 取代，但老项目或兼容 IE8 仍需掌握。核心是：浮动侧边栏 + 非浮动主内容。

• 侧边栏先写在 HTML 中，并设置 float: left（或 right），宽度固定
• 主内容区域不浮动，只用 margin 预留侧边栏空间（如 margin-left: 200px）
• 若主内容也浮动，必须确保所有列都浮动且总宽度 ≤ 100%，否则最后一列会掉到下一行
• 所有浮动列需声明 width，否则默认 100% 宽度导致无法并排

clear 属性和常见误用场景

clear 不是“清除浮动效果”，而是控制元素不能紧贴在某个方向的浮动元素旁边。它影响的是当前元素自身的位置。

• clear: left → 元素上边框必须低于左侧所有浮动元素的底边
• clear: both → 同时避开左右两侧浮动元素（最常用）
• 错误做法：给浮动元素自己加 clear（无效，它只对块级盒生效，且作用于后续兄弟元素）
• 典型误用：在导航菜单项上加 float: left 后，忘记给整个 ul 清除，导致下方内容上移贴住菜单

浮动不是布局神器，它是文本环绕工具。把它当布局手段用，就得时刻想着“怎么把父容器拉回来”“怎么避免文字钻进不该去的地方”。这些补救动作，恰恰是它被 Flex 替代的根本原因。