HTML+CSS：浮动详解

在HTML+CSS布局中，浮动（float） 是一种经典的布局技术，用于控制元素在页面中的排列方式。它最初设计用于实现文字环绕图片的效果，后来被广泛用于复杂布局，但随着Flexbox和Grid的兴起，其使用场景有所减少，但仍是前端基础中需要掌握的重要概念。

一、浮动的基本概念

浮动的本质：让元素脱离正常的文档流（Normal Flow），并向左或向右移动，直到碰到父元素的边缘或其他浮动元素。

• 正常文档流：元素默认按照从上到下、从左到右的顺序排列（块级元素独占一行，行内元素并排）。
• 浮动后：元素会"漂浮"起来，不再占据原来在文档流中的位置，导致后续元素可能向上移动并环绕它。

二、浮动的语法

通过float属性设置浮动，可选值如下：

selector {float: none;   /* 默认值，不浮动 */float: left;   /* 向左浮动 */float: right;  /* 向右浮动 */
}

示例：文字环绕图片

<div class="container"><img src="example.jpg" style="float: left; margin-right: 10px;" width="200"><p>这是一段文字，会环绕在图片右侧...（文字内容足够长时，会在图片下方继续排列）</p>
</div>

效果：图片向左浮动，文字会自动环绕在图片右侧和下方。

三、浮动的特性

1. 脱离文档流，但不脱离文本流
   • 浮动元素不再占据文档流的位置，后续非浮动元素会填补其空间。
   • 但文本（或行内元素）会环绕浮动元素，不会被其覆盖（这是浮动设计的初衷）。
2. 具有“块级”特性
   • 行内元素浮动后，会自动具备块级元素的特性（可设置宽高、margin/padding等），例如：

span {float: left;width: 100px;  /* 行内元素默认无法设置宽高，浮动后可生效 */height: 50px;
}

3. 浮动元素会“收缩”
   • 块级元素浮动后，如果未设置宽度，会根据内容自动收缩（默认块级元素宽度为父元素100%）。
4. 多个浮动元素会并排排列
   • 同一方向的浮动元素（如多个float: left）会在一行内依次排列，超出父元素宽度时会自动换行。

四、浮动的问题：父元素高度坍塌

浮动元素脱离文档流后，父元素无法感知其高度，导致父元素高度为0（即“高度坍塌”），可能破坏页面布局。

示例：高度坍塌现象

<div class="parent" style="border: 2px solid red;"><div class="child" style="float: left; width: 100px; height: 100px; background: blue;"></div>
</div>

• 父元素（红色边框）因子元素浮动，高度为0，边框会“塌陷”成一条线。

五、清除浮动（解决高度坍塌）

清除浮动的核心是让父元素重新感知浮动元素的高度，常用方法如下：

1. 额外标签法（隔墙法）

在浮动元素的最后添加一个空的块级元素，设置clear: both：

<div class="parent"><div class="child" style="float: left;"></div><!-- 额外标签 --><div style="clear: both;"></div>
</div>

• clear: both表示该元素左右两侧不允许有浮动元素，迫使父元素撑开高度。
• 缺点：增加无意义的标签，不符合语义化。

2. 父元素设置overflow

给父元素添加overflow: hidden或auto，触发“BFC（块级格式化上下文）”，使父元素包含浮动元素：

.parent {overflow: hidden;  /* 或 overflow: auto */
}

• 优点：简单快捷，无需额外标签。
• 缺点：可能隐藏超出父元素的内容（如子元素的margin或阴影）。

3. 伪元素清除法（推荐）

通过父元素的::after伪元素模拟额外标签，是目前最常用的方法：

.parent::after {content: "";       /* 伪元素必须设置content */display: block;    /* 转为块级元素 */clear: both;       /* 清除浮动 */visibility: hidden; /* 隐藏伪元素（不影响布局） */height: 0;         /* 高度为0，不占用空间 */
}
.parent {*zoom: 1; /* 兼容IE6/7（IE低版本不支持伪元素） */
}

• 优点：语义化好，不添加额外标签，兼容性强。

六、浮动的应用场景

1. 文字环绕图片：最经典的原生场景。
2. 横向排列元素：如导航栏、图片画廊等（多个元素浮动实现并排）。
3. 两栏/三栏布局：早期没有Flexbox/Grid时，常用浮动实现左右分栏。

示例：简单两栏布局

<div class="container"><div class="left" style="float: left; width: 30%; background: #f0f0f0;">左侧栏</div><div class="right" style="float: right; width: 70%; background: #e0e0e0;">右侧栏</div><div style="clear: both;"></div> <!-- 清除浮动，避免影响后续元素 -->
</div>

七、浮动的注意事项

1. 谨慎嵌套浮动：多层浮动可能导致复杂的布局问题，难以调试。
2. 及时清除浮动：只要父元素包含浮动子元素，就需要清除浮动，避免高度坍塌。
3. 现代布局替代方案：对于复杂布局，优先使用Flexbox（一维）或Grid（二维），它们更简洁、易维护，且避免了浮动的副作用。