Vue 3 + 原生 CSS Float

下面我用 Vue 3 + 原生 CSS Float 给你一份 从概念 → 用法 → 实战 → 注意事项 的完整说明。

⚠️ 先给结论：Float 已不再是主流布局方案，但在某些场景下仍然有用。

一、先给结论（非常重要）

场景	推荐方案
页面整体布局	✅ Flex / Grid
图文环绕	✅ Float
左右两栏	⚠️ Float（需清除）
Vue 3 新项目	❌ 不推荐

👉 本文是教你"会用"，不是"主推"

二、Float 是什么？

Float = 浮动布局

元素脱离正常文档流，向左 / 右浮动

css 复制代码

float: left | right | none;

三、最基础示例（图文环绕）

✅ Vue 3 示例

vue 复制代码

<template>
  <div class="article">
    <img class="float-img" src="/logo.png" />
    <p>这是一段很长很长的内容......</p>
  </div>
</template>

<style scoped>
.float-img {
  float: left;
  width: 120px;
  margin-right: 16px;
}
</style>

📊 效果：

复制代码

[图片] 文字文字文字
文字文字文字文字

✅ 这是 float 最合理的用途

四、左右两栏布局（经典但不推荐）

✅ HTML

vue 复制代码

<template>
  <div class="wrapper">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
</template>

✅ CSS

css 复制代码

.wrapper {
  width: 100%;
}

.left {
  float: left;
  width: 200px;
}

.right {
  float: right;
  width: calc(100% - 200px);
}

📊 图示：

复制代码

[ 左侧 ] [        右侧        ]

⚠️ 必须清除浮动，否则高度塌陷

五、✅ 清除浮动（Float 最重要知识点）

✅ 方案一（推荐）：clearfix

css 复制代码

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

vue 复制代码

<div class="wrapper clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

✅ 方案二：父元素 overflow

css 复制代码

.wrapper {
  overflow: hidden;
}

⚠️ 会裁剪内容

六、Float 的常见坑（你必须知道）

❌ 1. 父元素高度为 0

css 复制代码

.parent {
  /* 没有高度 */
}
.child {
  float: left;
}

✅ 解决：clearfix

❌ 2. 元素重叠

css 复制代码

.box1 { float: left; }
.box2 { margin-left: 100px; }

✅ float 元素不占文档流

❌ 3. 响应式灾难

css 复制代码

@media (max-width: 768px) {
  .left, .right {
    float: none;
    width: 100%;
  }
}

👉 Flex 一行搞定

七、Float vs Flex（对比）

对比项	Float	Flex
学习成本	✅ 低	✅ 中
自动换行	❌	✅
居中对齐	❌	✅
等高布局	❌	✅
现代项目	❌	✅

八、Vue 3 中 Float 的合理用法

✅ 图文混排

✅ 文章页

✅ 老项目维护

❌ 页面整体布局

❌ 组件布局

九、企业项目中 Float 的正确姿势

css 复制代码

/* 只用于内容层 */
.article img {
  float: left;
  margin-right: 16px;
}

/* 布局层 */
.layout {
  display: flex;
}

十、一句话总结

✅ Float 不是布局工具，是"文字环绕工具"

✅ Vue 3 新项目：能用 Flex 就不用 Float

✅ 用 Float 一定要清除浮动

如果你愿意，我可以下一步帮你：

✅ 用 Flex 重写一个 Float 布局
✅ 对比 Float / Flex / Grid
✅ 帮你判断 你当前页面该不该用 Float

你现在是在 维护老项目 还是 写新 Vue 3 页面？