浮动属性通过float:left或right使元素脱离文档流并左右排列，实现图文环绕或多列布局，需注意清除浮动以避免父容器塌陷，常用方法包括clear:both、overflow:hidden或伪类clearfix，尽管现代布局多用flexbox和grid，但理解float对维护旧项目和特定效果仍有价值。

浮动（float）属性是CSS中用于控制元素在父容器内左右排列的一种传统布局方式。通过设置 float: left 或 float: right，可以让块级元素脱离正常文档流，并向指定方向靠拢，实现文本环绕图片或多个盒子并排显示的效果。

MoltOverflow

Moltbots问答社区 - 提问编程问题，分享解决方案

下载

float的基本取值与作用

float 属性主要有四个可选值：

• left：元素向左浮动，其他内容围绕其右侧和下方排列
• right：元素向右浮动，其他内容围绕其左侧和下方排列
• none：默认值，不浮动
• inherit：继承父元素的浮动设置

最常见用途是让多个 div 并排显示，比如制作简单的多列布局。

使用float实现左右排列

假设要将两个盒子并排放置，一个在左，一个在右：

<div class="box-left">左边内容</div>
<div class="box-right">右边内容</div>

对应CSS：

.box-left {
  float: left;
  width: 50%;
}
.box-right {
  float: right;
  width: 50%;
}

此时两个盒子会分别贴着容器的左右边缘排列，形成一左一右的布局。

清除浮动的影响

浮动元素会脱离标准流，可能导致父容器高度塌陷或后续元素错位。为避免问题，需要清除浮动：

• 使用 clear: both 在浮动元素后添加清除元素
• 给父容器添加 overflow: hidden 触发BFC（块格式化上下文）
• 使用伪类清除：

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

  并将该类应用到父容器

实际应用场景与注意事项

虽然现代布局更多使用 Flexbox 或 Grid，但理解 float 仍有助于维护旧项目或实现特定效果：

• 图文混排时让图片浮动，文字自动环绕
• 创建简单的两栏或三栏网页布局
• 注意设置宽度，防止浮动元素换行
• 始终考虑清除浮动，避免布局混乱

基本上就这些。float 虽然不是当前推荐的主要布局手段，但在特定场景下依然实用，掌握其原理对理解CSS布局演变很有帮助。不复杂但容易忽略细节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！