float 浮动属性

最后更新：2026-09-13

float float 浮动属性

float 属性用于让元素脱离普通文档流，向左或向右浮动，直到其边缘碰到包含块或另一个浮动元素的边缘。它最初用于实现文字环绕图片的效果，后来被广泛用于构建多列布局，如今在 Flexbox 和 Grid 普及后已回归其本来的用途。

分类
初始值	none
继承	否
适用于	all
可动画	discrete
CSS 版本	CSS1
状态	标准

📝 语法

float: none | left | right | inline-start | inline-end;

⚙️ 取值

值	类型	描述
`left \| right \| none`	关键字	元素浮动方向

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
float	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

注意： 浮动元素会脱离文档流，父容器可能因无法感知其高度而出现"高度坍塌"。常用清除浮动的方法包括：父元素设置 overflow: hidden，或使用伪元素 ::after 清除。

提示： 现代布局中，多列布局建议使用 Flexbox 或 Grid 替代 float，float 更适合文字环绕图片等原生场景。

❓ 常见问题

Q如何清除浮动？

A三种常用方式：1）父元素 overflow:hidden 或 auto，用 BFC 包裹浮动子元素；2）伪元素（推荐）：.clearfix::after{content:;display:block;clear:both}；3）父元素 display:flow-root。

Qfloat 和 display:inline-block 有什么区别？

Afloat 让元素脱离文档流并向左/右贴靠，后续内容会环绕它排列，父容器可能高度坍塌；inline-block 元素仍在文档流中，水平排列且不产生环绕效果，元素间默认有空白间隙（可用 font-size:0 消除）。简单说：float 用于文字环绕和早期多列布局，inline-block 用于水平排列的列表/导航。

Q为什么 float 会导致父元素高度坍塌？

A浮动元素脱离普通文档流，父元素无法感知其高度，以为内部没内容，高度就塌为 0（或只剩非浮动内容高度）。解决思路是让父元素重新包含浮动元素：用 overflow:hidden/auto 创建 BFC、用 clearfix 伪元素清除、或给父元素 display:flow-root。

Q现代布局中还有必要用 float 吗？

A布局层面基本不需要：多列布局、横向排列等场景已由 Flexbox 和 Grid 全面取代，它们更可控、无清除浮动负担。float 现在主要用于原生场景——让文字环绕图片（报纸式排版），这是 float 设计的初衷。新项目里如果只是想让元素左右排布，优先用 flex。