CSS基础教程（二十六）Float(浮动)：浮世浮城：深度解剖CSS Float的前世今生与爱恨情仇

最新推荐文章于 2025-11-24 23:20:58 发布

原创

最新推荐文章于 2025-11-24 23:20:58 发布 · 350 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

第一章：Float的“出道即巅峰”——本来只想安静地绕个文字

在Web的“远古时期”（大约20多年前），网页还是一片“文档流”的净土。所有元素像搭积木一样，从上到下、从左到右，规规矩矩地排列。

直到有一天，设计师们提出了一个“过分”的要求：“能不能让这张图片在左边，让文字像杂志一样环绕着它？”

CSS之父一拍脑袋：“这个需求很合理！”于是，float属性应运而生。它的初衷极其单纯——实现文字环绕效果。就像扔一块磁铁到一盒铁粉里，周围的铁粉（文字）会自然而然地环绕它。

它的取值也非常简单：

left：元素向左浮动，内容环绕其右侧和下方。
right：元素向右浮动，内容环绕其左侧和下方。
none（默认）：不浮动，乖乖呆在文档流里。
inherit：继承父元素的浮动属性。

示例1：Float的初心

<!DOCTYPE html>
<html>
<head>
<style>
.img-with-text {
  width: 400px;
  border: 2px solid #ccc;
  padding: 10px;
}
.float-left {
  float: left;
  margin: 0 15px 5px 0; /* 给它点呼吸空间 */
  width: 150px;
  height: 100px;
  background-color: #f0d0d0;
}
</style>
</head>
<body>

<div class="img-with-text">
  <div class="float-left">我是浮动的Div（假装是图片）</div>
  <p>这里是很多很多的文字内容... Float属性最初就是为了实现像我这样优雅的文字环绕效果而生的。看，我是不是很自然地环绕在“图片”的右侧和下方？就像杂志的排版一样！</p>
</div>

</body>
</html>

看，这就是Float最纯粹、最美好的样子。