在CSS布局体系中，float属性主要用于控制元素在水平方向上的浮动行为。通过将元素设置为左浮动或右浮动，可以使其脱离普通文档流，并允许后续内容环绕在浮动元素周围。这一特性最早用于实现图文混排，后来被广泛用于构建多栏页面结构。虽然Flexbox和Grid已经逐渐成为主流布局方案，但float在特定场景下仍然不可替代，理解它的工作方式对阅读和维护旧代码也很重要。
一、float属性的基本语法与取值
float属性可以作用于绝大多数元素，但通常只在块级元素或替换元素上使用才有明显布局效果。它的语法非常简单，属性名直接写作float，可选值包括left、right、none和inherit。其中left表示元素向左浮动，right表示元素向右浮动，none是默认值，表示元素不浮动，inherit则继承父元素的浮动状态。
.selector {
float: left;
}
在实际使用中，只需要给目标元素设置float: left;或float: right;即可。浮动元素会沿水平方向移动，直到其外边缘碰到包含块的内容区边缘，或者碰到另一个浮动元素的外边缘。如果水平空间不足以容纳所有浮动元素，后面的浮动元素会自动换行到下一行。需要注意的是，设置浮动后元素会生成块级框，即使是原本的行内元素也会表现得像块级元素一样。
例如，给一个图片设置左浮动后，图片会靠左排列，其后的文本不会从图片下方开始，而是会紧贴着图片的右侧排列。这种效果就是float早期最典型的图文混排用法。若同时给多个元素设置相同的浮动方向，它们会在同一行内依次排列，组成类似多栏的结构。
二、float属性的作用机制与文档流变化
理解float的关键在于它对文档流的影响。浮动元素会脱离普通文档流，但并不是完全脱离，因为它仍然会影响后续行框的排列。普通块级元素会忽略浮动元素的存在，而文本内容、行内元素以及行内块元素则会围绕浮动元素进行排列。这也是为什么float能够实现文字环绕图片的效果。
下面给出一个图文混排的示例，左侧图片使用左浮动，右侧文本会自动填充剩余空间：
<div class="article"> <img src="cover.jpg" alt="封面图" style="float: left; margin-right: 16px;"> <p>这段文字会环绕在图片右侧，直到文字内容超过浮动元素的高度后，才会回到图片下方的正常位置。</p> </div>
这段代码中，<img>元素被设置为float: left，后面的<p>元素没有浮动，但其文字内容会避开浮动图片占据的空间。如果去掉float: left，图片会作为行内替换元素与文字排列在同一行，或者按照默认的垂直布局放置，无法形成环绕效果。
然而浮动带来的另一个典型问题是父容器高度塌陷。由于浮动元素不参与父容器的高度计算，如果父容器内只有浮动子元素，父容器的高度会变为0，进而导致背景、边框等样式异常，后续元素也可能重叠上来。解决这一问题需要使用清除浮动技术。
三、清除浮动的几种方法
清除浮动并不是删除浮动效果，而是让父容器能够感知浮动子元素的高度，从而恢复正常的布局高度。常见的清除浮动方法有使用clear属性、触发BFC（块级格式化上下文）以及使用伪元素clearfix。
第一种方法是直接使用clear属性。它可以应用到浮动元素后面的元素上，取值包括left、right和both，分别表示清除左浮动、右浮动或同时清除两侧浮动。最常见的是clear: both。例如：
.clear {
clear: both;
}
在浮动元素的末尾添加一个带有clear: both的空元素，可以阻止后续元素与浮动元素重叠。早期开发中经常写一个空的<div>标签并赋予清除类名，但这种方式会在HTML中添加无意义的标签，影响语义化和代码整洁。
第二种方法是给父容器设置overflow: hidden或overflow: auto。这样可以让父容器触发BFC，自动包含浮动的子元素。示例：
.container {
overflow: hidden;
}
这种写法简单，但需要注意overflow: hidden可能会裁剪掉父容器之外的内容，比如下拉菜单或提示框，在某些场景下会带来副作用。
第三种方法是使用伪元素实现clearfix。它不需要添加额外标签，也不影响溢出内容，是当前最推荐的做法。核心代码如下：
.clearfix::after {
content: "";
display: block;
clear: both;
}
使用时只需要给父容器加上clearfix类名即可。伪元素会在父容器的末尾生成一个不可见的块级元素，并清除两侧浮动，从而撑起父容器高度。这种方法兼顾了语义化和兼容性，在大量项目中得到应用。
四、float在实际布局中的应用与局限性
float在双栏或三栏布局中曾经被大量使用。通过给侧边栏设置左浮动、主内容区设置右浮动或左浮动，可以快速搭建基本的页面骨架。下面是一个简单的两栏布局示例：
<div class="layout clearfix"> <aside class="sidebar">侧边栏</aside> <main class="content">主内容区</main> </div>
.sidebar {
float: left;
width: 25%;
}
.content {
float: right;
width: 70%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
需要注意的是，使用float布局时宽度计算必须精确，边框、内边距和间距都会影响实际占用空间。如果两个浮动的容器宽度之和超过父容器宽度，布局就会错位。此外浮动元素之间不会自动等高，需要额外处理才能让视觉上保持一致。
如今，Flexbox和Grid已经能够更优雅地解决大部分布局需求。Flexbox适合一维排列，例如水平或垂直方向的列表；Grid适合二维网格布局，能同时控制行列。在不需要文字环绕效果的场景下，建议优先使用Flexbox或Grid，减少清除浮动带来的复杂度。不过，float在图文混排、旧项目维护以及某些特殊兼容性要求下仍然有实用价值。
总结来看，float是CSS布局中一个基础而重要的属性。掌握它的语法、工作机制以及清除浮动的方法，不仅有助于理解CSS的布局模型，也能在阅读和维护历史代码时更加得心应手。
CSS float属性float属性用法清除浮动修改时间：2026-08-29 23:46:05