CSS 浮动

浮动（Float）是CSS中的一种布局技术，用于使元素脱离正常流并向左或向右移动，直到它的外边缘碰到包含块或另一个浮动元素的边框为止。

基本语法

css 
元素选择器 {
  float: none | left | right | inherit;
}

属性值

  • none：默认值，元素不浮动
  • left：元素向左浮动
  • right：元素向右浮动
  • inherit：继承父元素的float属性

浮动的工作原理

  1. 当元素设置了浮动后，它会脱离正常流
  2. 元素向左或向右移动，直到碰到包含块的边缘或另一个浮动元素
  3. 浮动元素不再占据正常流中的空间
  4. 正常流中的其他元素会环绕浮动元素

浮动的基本使用

1. 文字环绕图片

html 
<div class="container">
  <img src="image.jpg" alt="示例图片" style="float: left; margin-right: 10px;">
  <p>这是一段文字，它会环绕在图片的右侧。当图片向左浮动时，文字会自动调整位置，形成文字环绕图片的效果。</p>
</div>

2. 多列布局

在Flexbox和Grid出现之前，浮动常用于创建多列布局：

html 
<div class="container">
  <div class="column" style="float: left; width: 33.33%;">第一列</div>
  <div class="column" style="float: left; width: 33.33%;">第二列</div>
  <div class="column" style="float: left; width: 33.33%;">第三列</div>
</div>

3. 图文混排

html 
<div class="article">
  <img src="author.jpg" alt="作者头像" style="float: right; margin-left: 10px;">
  <h2>文章标题</h2>
  <p>文章内容...</p>
</div>

清除浮动

当元素设置浮动后，它的父容器可能会出现高度塌陷的问题。清除浮动是解决这个问题的方法。

1. 使用clear属性

clear属性用于指定元素是否允许浮动元素在其左侧或右侧：

css 
元素选择器 {
  clear: none | left | right | both | inherit;
}
  • none：默认值，允许浮动元素在两侧
  • left：不允许左侧有浮动元素
  • right：不允许右侧有浮动元素
  • both：不允许两侧有浮动元素
  • inherit：继承父元素的clear属性
html 
<div class="container">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
  <div class="clear-both">这个元素会清除两侧的浮动</div>
</div>

2. 清除浮动的常用方法

方法一：使用空元素清除浮动

html 
<div class="container">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
  <div style="clear: both;"></div>
</div>

方法二：使用overflow属性

css 
.container {
  overflow: auto;
}

这种方法会触发BFC（块级格式化上下文），从而包含浮动元素。

方法三：使用伪元素清除浮动（Clearfix）

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

这是最常用的清除浮动方法：

html 
<div class="container clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

浮动的特性

  1. 宽度收缩：浮动元素的宽度会收缩到其内容的宽度（如果没有设置明确的宽度）。

  2. 块状化：行内元素设置浮动后会自动变为块级元素，可以设置宽高。

  3. 堆叠顺序：浮动元素会覆盖正常流中的元素，但不会覆盖文字内容。

  4. 不占据空间：浮动元素脱离正常流，不再占据原有的空间。

应用场景

1. 导航菜单

html 
<nav class="navbar">
  <ul>
    <li style="float: left;"><a href="#">首页</a></li>
    <li style="float: left;"><a href="#">关于我们</a></li>
    <li style="float: left;"><a href="#">产品</a></li>
    <li style="float: right;"><a href="#">登录</a></li>
  </ul>
  <div style="clear: both;"></div>
</nav>

2. 图片库

html 
<div class="gallery">
  <img src="image1.jpg" alt="图片1" style="float: left; width: 25%;">
  <img src="image2.jpg" alt="图片2" style="float: left; width: 25%;">
  <img src="image3.jpg" alt="图片3" style="float: left; width: 25%;">
  <img src="image4.jpg" alt="图片4" style="float: left; width: 25%;">
  <div style="clear: both;"></div>
</div>

3. 卡片布局

html 
<div class="card">
  <img src="card-image.jpg" alt="卡片图片" style="float: left; width: 40%;">
  <div style="float: right; width: 55%;">
    <h3>卡片标题</h3>
    <p>卡片内容...</p>
  </div>
  <div style="clear: both;"></div>
</div>

注意事项

  1. 高度塌陷：父容器如果只包含浮动元素，会出现高度塌陷的问题，需要使用清除浮动的方法解决。

  2. 文字环绕：正常流中的文字会环绕浮动元素，这可能不是预期效果，可以使用清除浮动或BFC来解决。

  3. 响应式问题：在小屏幕设备上，多列浮动布局可能会出现问题，需要使用媒体查询调整。

  4. 现代布局替代方案：对于复杂的布局，现代CSS布局技术（Flexbox和Grid）提供了更强大、更灵活的解决方案。

浏览器兼容性

浏览器 支持情况
Chrome 完全支持
Firefox 完全支持
Safari 完全支持
Edge 完全支持
IE IE4及以上支持

总结

浮动是CSS中一种经典的布局技术，主要用于实现文字环绕和多列布局。虽然现代CSS提供了更强大的布局方式（如Flexbox和Grid），但了解浮动的工作原理和使用方法仍然很重要，特别是在维护旧代码时。清除浮动是使用浮动布局时必须掌握的技巧，以避免出现高度塌陷等问题。

最后更新：2026-02-07