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

做网页设计的时候，经常会遇到要把几个模块并排摆放的情况。比如一个页面左边是菜单栏，右边是内容区，这时候用 CSS 的浮动（float）就能轻松搞定。

什么是CSS浮动

浮动原本是为了解决文字环绕图片的问题而设计的。比如在一篇文章里插入一张图，默认情况下图片会独占一行，但加上 float 属性后，文字就可以自然地绕着图片排布。

后来开发者发现，这个特性也能用来做布局。通过让多个块级元素向左或向右浮动，就能让它们并排显示，而不是上下堆叠。

基本语法

float 属性有四个常用值：left、right、none 和 inherit。最常用的是 left 和 right。

.box {
  float: left;
}

上面这段代码会让 class 为 box 的元素向左靠，腾出右边的空间给其他内容填充。

实现两栏布局

假设你要做一个左侧固定宽度导航、右侧自适应内容的页面，可以这样写：

<div class="sidebar">导航栏</div>
<div class="main-content">正文内容</div>

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

.main-content {
  margin-left: 210px; /* 留点空隙 */
  background: #ddd;
}

这样一来，两个 div 就能分居左右，形成清晰的结构。

清除浮动的影响

浮动有个副作用：父容器可能“塌陷”。因为浮动元素脱离了正常的文档流，父元素算高度时就忽略了它们。

解决办法是在浮动元素之后加一个清除浮动的元素：

<div class="clearfix"></div>

.clearfix {
  clear: both;
}

或者使用伪元素方式更简洁：

.container::after {
  content: '';
  display: block;
  clear: both;
}

这样父容器就能正确包裹住所有子元素了。

虽然现在有了 Flexbox 和 Grid 这些更现代的布局方式，但在维护老项目或者需要兼容旧浏览器时，float 依然是不可或缺的工具。掌握它的用法，就像修电脑还得会用螺丝刀一样实在。