17370845950

浮动元素脱离文档流，导致后续块级元素占据其位置但文字环绕；多个浮动元素水平排列，超出则换行；宽度由内容包裹，不撑满父容器；引发父容器高度塌陷，需通过clear、overflow或伪元素清除浮动。

浮动（float）是CSS中用于控制元素排列方式的一个属性，最初设计用于实现文字环绕图片的效果，后来被广泛用于布局。以下是浮动的一些主要特性：

脱离文档流

当一个元素设置为 float: left 或 float: right 时，它会从正常的文档流中移出，不再占据原来的空间。后续的块级元素会无视它的存在而占据其原本位置，但行内内容（如文字）会围绕浮动元素排列。

块级元素横向排列

浮动元素会在一行内尽可能地向左或向右靠齐，直到碰到父容器边缘或其他浮动元素。利用这个特性，可以实现多列布局，比如两个 div 分别左浮动并排显示。

• 多个左浮动的元素会依次从左到右排列
• 如果一行放不下，后面的元素会换行显示
• 浮动元素的垂直对齐基于行框（line box）

形成“包裹”效果

浮动元素的宽度默认由内容决定，即使没有设置 width，也会收缩包裹内容。这种特性常用于实现自适应宽度的布局模块。

• 浮动元素不会撑满父容器（除非显式设置 width）
• 文本、行内元素等会围绕在浮动元素周围

父容器高度塌陷问题

由于浮动元素脱离了文档流，父元素无法检测到其高度，导致父容器高度可能变为0，这就是常说的“高度塌陷”。

• 解决方法包括使用 clear 清除浮动
• 使用 overflow: hidden 触发BFC
• 通过伪元素（::after）添加清除浮动的结构

基本上就这些。虽然现代布局更多使用 Flexbox 和 Grid，但在旧项目或特定场景中，理解浮动依然很重要。