CSS浮动用法详解：网页布局中的实用技巧

做网页设计时，经常会遇到要把几个块状元素排成一排的情况。比如一个页面里，左边是图片，右边是文字说明，这种布局用 CSS 的 float 属性就能轻松搞定。

float 是怎么工作的

CSS 中的 float 属性原本是为图文混排设计的。设置 float: left 或 float: right 后，元素会脱离正常的文档流，向左或向右靠拢，其他内容会围绕它排列。

举个例子，有这样一段 HTML：

<div class="image">图片</div>
<div class="text">这里是说明文字，会自动环绕在图片旁边。</div>

给图片加上浮动样式：

.image {
  float: left;
  width: 150px;
  height: 100px;
  background: #ccc;
  margin-right: 10px;
}

这时文字就会自动贴到右边，形成图文并排的效果，特别适合新闻类页面的排版。

用浮动实现两栏或三栏布局

很多传统网站的左侧导航+右侧内容结构，就是用 float 搭出来的。比如要创建一个两栏布局：

<div class="sidebar">侧边栏</div>
<div class="main-content">主内容区</div>

.sidebar {
  float: left;
  width: 200px;
  background: #f0f0f0;
}

.main-content {
  margin-left: 210px;
  background: #fff;
}

侧边栏向左浮动，主内容通过 margin 留出空间，两者就不会重叠。

清除浮动的必要性

浮动元素会脱离文档流，如果不处理，后面的元素可能会错位。比如页脚跑到了侧边栏下面，这就需要清除浮动。

常用的方法是在最后一个浮动元素后面加一个清除元素：

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

或者用伪类方式：

.container::after {
  content: "";
  display: table;
  clear: both;
}

把 container 设为包含浮动的父容器，这样它就能正确包裹住内部的浮动元素，避免布局塌陷。

浮动的局限性

虽然 float 能实现基本布局，但它本质是为文本环绕设计的，用在复杂结构上容易出问题。比如响应式场景下，调整屏幕大小时容易错乱。现在更推荐使用 Flexbox 或 Grid 布局来替代。

但在维护老项目或简单页面时，掌握 float 依然很实用。尤其是看到一些老网站的源码，你会发现大量浮动的身影。