📚 一、什么是浮动？

浮动最初是为实现文字环绕图片的效果而设计的（类似报纸排版）。后来被广泛用于网页布局。

大白话解释： 浮动就是让元素”漂浮”起来，脱离正常的文档流，向左或向右移动，直到碰到容器边缘或其他浮动元素。

基础示例：文字环绕效果

浮动元素

这里是环绕的文本内容。浮动元素脱离了正常的文档流，所以文本会围绕在浮动元素周围。这正是浮动最初的设计目的——实现文字环绕图片的效果。您可以观察到文本是如何自然地围绕左侧的浮动框排列的。

🎛️ 二、浮动的属性值

float属性有三个主要值：

1. float: left;

左浮动

这个元素向左浮动，文本内容会围绕在它的右侧和下方。浮动元素会尽可能地靠左移动，直到碰到容器边框或其他浮动元素。

2. float: right;

右浮动

这个元素向右浮动，文本内容会围绕在它的左侧和下方。就像杂志中的图片靠右排版一样，文字会自然地围绕在浮动元素的左边。

3. float: none; (默认值)

无浮动

这是默认情况，元素处于正常文档流中，不会产生任何浮动效果。元素会占据整行空间，文本不会围绕元素排列。

/* CSS浮动属性语法 */
.float-left {
  float: left;
}

.float-right {
  float: right;
}

.no-float {
  float: none; /* 默认值 */
}

⚠️ 三、浮动的”副作用”（高度塌陷）

浮动元素脱离了正常文档流，导致其父容器无法自动计算高度，这就是所谓的”高度塌陷”问题。

问题表现： 当父元素内部所有子元素都浮动时，父元素的高度会变成0，导致后续元素上移，破坏页面布局。

高度塌陷示例

浮动元素1
浮动元素2

可以看到容器的高度塌陷了（边框被压缩），因为它的两个子元素都是浮动的，脱离了正常文档流。

🧹 四、清除浮动（解决高度塌陷）

为了解决高度塌陷问题，我们需要清除浮动。以下是几种常用方法：

1. 使用clear属性

在浮动元素后添加一个空元素，并设置clear: both;

<div style=”clear: both;”></div>

2. 父元素使用overflow属性

设置父元素overflow: auto;或overflow: hidden;

.parent {
  overflow: auto;
}

3. 使用clearfix技巧（最佳实践）

/* 现代clearfix方法 */
.clearfix::after {
  content: “”;
  display: table;
  clear: both;
}

清除浮动后的效果

浮动元素1
浮动元素2

父容器通过clearfix技巧恢复了正常高度，边框完整显示出来了！

建议： 推荐使用clearfix方法，这是最现代、最可靠的清除浮动技巧。

💼 五、浮动的实际应用

浮动在现代网页布局中仍然有多种用途：

多栏布局

创建传统的左右分栏布局

导航菜单

水平排列导航项

图文混排

实现文字环绕图片效果

两栏布局示例

主内容区域
侧边栏
/* CSS代码实现两栏布局 */
.main-content {
  float: left;
  width: 70%;
}

.sidebar {
  float: right;
  width: 25%;
}

/* 使用clearfix清除浮动 */
.container::after {
  content: “”;
  display: table;
  clear: both;
}