🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：float: left;

📝 使用场景

当你希望使用经典的 float: left; 方法将多个元素横向排列时，可以使用此模板。它适用于不支持 Flexbox 的旧浏览器环境。

📘 说明

通过为每个元素设置 float: left; 和宽度，实现横向排列。同时，为父容器添加 .clearfix 类可以确保其高度不会坍塌。

✅ 示例

盒子 1
盒子 2
盒子 3

📄 代码（片段）

<style>
  .float-box {
    float: left;
    width: 30%;
    margin-right: 5%;
    padding: 1rem;
    background: #f9f9f9;
    border: 1px solid #ccc;
    text-align: center;
  }
  .float-box:last-child {
    margin-right: 0;
  }
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<div class="clearfix">
  <div class="float-box">盒子 1</div>
  <div class="float-box">盒子 2</div>
  <div class="float-box">盒子 3</div>
</div>

📦 代码（完整 HTML）

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>float: left 示例</title>
  <style>
    .float-box {
      float: left;
      width: 30%;
      margin-right: 5%;
      padding: 1rem;
      background: #f9f9f9;
      border: 1px solid #ccc;
      text-align: center;
    }
    .float-box:last-child {
      margin-right: 0;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="float-box">盒子 1</div>
    <div class="float-box">盒子 2</div>
    <div class="float-box">盒子 3</div>
  </div>
</body>
</html>
已复制！

📐 float 布局的实用技巧

float: left 是一个经典但依然常用的 CSS 属性。尽管 Flexbox 和 Grid 已成为主流布局方式，但在一些老旧环境中，float 仍是构建布局不可或缺的工具。

🔄 float 的基本原理

设置 float 的元素会脱离正常的文档流，并靠近其父元素的左侧或右侧排列。关键是一定要为其指定 width，并在父元素上使用 clearfix 清除浮动，这样可以正确计算父元素的高度。

⚠️ 常见问题与解决方法

当多个 float 元素高度不一致时，可能会出现意想不到的换行或重叠问题。为避免这种情况，可以为每个 float 元素添加 overflow: hidden，或结合使用 display: inline-block。

🛠️ 实用应用示例

float 非常适合图片环绕文本的布局，或构建报纸、杂志风格的复杂排版。此外，结合 shape-outside 属性，还可以实现文本沿圆形、多边形等路径环绕的高级设计效果。

float 也可用于响应式设计，但需通过媒体查询配合 float: none 来适配移动端显示。在现代 Web 开发中，建议优先使用 Flexbox 或 Grid，而将 float 限用于特定场景中。

相关模板