CSS 零基础教程

CSS float 浮动

CSS 中的 float (浮动) 和 clear (清除) 属性可以让你将元素并排排列、创建多列布局以及实现文字环绕图片的效果。

虽然像 Flexbox 和 Grid 这样的现代布局方法通常是复杂布局的首选，但理解浮动和清除对于维护旧代码以及解决特定布局场景（如文字环绕）仍然非常有价值。

本章将涵盖浮动和清除的基础知识，演示它们的工作原理以及如何有效地使用它们。

1. 理解 Float (浮动) 属性

float 属性用于将元素定位到其容器的左侧或右侧，允许其他内容（通常是文本）环绕它。浮动元素会脱离正常的文档流，这意味着它不会像非浮动元素那样占据垂直空间。

1.1 基本用法

float 属性接受以下值：

  • left：将元素浮动到其容器的左侧。
  • right：将元素浮动到其容器的右侧。
  • none：元素不浮动（默认值）。
  • inherit：从父元素继承 float 值。

示例：文字环绕图片

<div class="container">
  <img src="image.jpg" alt="我的图片" class="float-left">
  <p>这是一些会环绕图片的文本。float 属性允许图片定位到左侧，而文本在其周围流动。这对于创建类似报纸的布局或在容器内对齐元素非常有用。</p>
</div>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 10px;
}
.float-left {
  float: left; /* 将图片向左浮动 */
  margin-right: 10px; /* 在图片右侧添加一些空间，避免文字紧贴 */
}

1.2 浮动如何影响布局

当一个元素浮动时，它被移出正常的文档流。非浮动的块级元素会表现得好像浮动元素不存在一样，可能会与其重叠。但是，这些块级元素内部的内联内容（如文本）会感知到浮动元素并环绕它。

思考一下示例：

<div class="container">
  <div class="floated">Float Left</div>
  <div>This is a regular div.</div>
</div>
.container {
  width: 300px;
  border: 1px solid black;
  padding: 10px;
}
.floated {
  float: left;
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

发生了什么？

  • .floated div 向左浮动。
  • 随后普通的 div 会尝试占据容器的整个宽度，因此它实际上会重叠 (overlap) 在浮动元素的下方（背景和边框会延伸到浮动元素后面）。
  • 然而，普通 div 内部的文本内容会识别浮动元素的存在，并环绕 (wrap around) 它，而不会被覆盖。

关键点解析：
这是 CSS 中一个常见的困惑点。块级盒子（普通的 div）会忽略浮动元素，填满可用空间；但行内盒子（文字）会缩短以避开浮动元素。

1.3 包含浮动

有时候，你希望父元素能够“包含”其浮动的子元素，也就是说，父元素的高度应该自动调整以容纳这些浮动元素。

问题： 如果父元素只包含浮动元素，默认情况下，它的高度会塌陷 (collapse) 为 0。这会导致父元素的背景色或边框无法正确显示。

有几种方法可以解决这个问题：

1.3.1 使用 overflow 属性 (Overflow Property)

将父元素的 overflow 属性设置为 auto、scroll 或 hidden，会强制它包含浮动元素（这会在内部创建一个块级格式化上下文 BFC）。

.container {
  overflow: auto; /* 或者 hidden, scroll */
}

1.3.2 clearfix 类 (clearfix Class)

这是最常用且稳健的方法。它涉及给父元素添加一个特定的类（通常命名为 clearfix），该类使用伪元素 (::after) 在父元素内容的末尾插入一个不可见的块来清除浮动。

CSS 代码：

.clearfix::after {
  content: "";
  display: table; /* 或者 block */
  clear: both;    /* 核心：清除左右浮动 */
}

.container {
  width: 300px;
  border: 1px solid black;
  padding: 10px;
}
.floated {
  float: left;
  width: 100px;
  height: 50px;
  background-color: lightblue;
}

HTML结构：

<div class="container clearfix">
  <div class="floated">Float Left</div>
  <div>This is a regular div.</div>
</div>

为什么推荐 clearfix？clearfix 方法被广泛使用，因为它是最安全的。相比之下，overflow: auto 或 hidden 在某些情况下可能会意外地隐藏溢出的内容或显示不必要的滚动条。

2. 理解 Clear (清除) 属性

clear 属性指定了在元素的哪一侧不允许出现浮动元素。它用于控制浮动元素周围的元素流向，通常用于将元素推到浮动元素的下方。

2.1 基本用法

clear 属性接受以下值：

  • left：元素左侧不允许有浮动元素（如果左侧有，该元素会移到下一行）。
  • right：元素右侧不允许有浮动元素。
  • both：左右两侧都不允许有浮动元素（最常用）。
  • none：允许两侧有浮动元素（默认）。

示例：

<div class="container">
  <div class="floated">左浮动</div>
  <p class="clear">这段文字将被放置在浮动 div 的下方。</p>
</div>
.container {
  width: 300px;
  border: 1px solid black;
  padding: 10px;
}
.floated {
  float: left;
  width: 100px;
  height: 50px;
  background-color: lightblue;
}
.clear {
  clear: left; /* 确保此段落出现在左浮动元素的下方 */
}

在这个例子中，带有 clear 类的段落应用了 clear: left。这确保了段落显示在左侧任何浮动元素的下方，防止它环绕在 floated div 周围。

2.2 清除不同方向的浮动

根据浮动元素的方向选择正确的 clear 值非常重要。

  • 如果你要清除左浮动元素，使用 clear: left。
  • 如果你要清除右浮动元素，使用 clear: right。
  • 如果你需要清除两个方向的浮动元素，使用 clear: both。

场景示例：

<div class="container">
  <div class="float-left">Float Left</div>
  <div class="float-right">Float Right</div>
  <p class="clear">This paragraph will be placed below both floated divs.</p>
</div>
.container {
  width: 500px;
  border: 1px solid black;
  padding: 10px;
}
.float-left {
  float: left;
  width: 150px;
  height: 50px;
  background-color: lightblue;
}
.float-right {
  float: right;
  width: 150px;
  height: 50px;
  background-color: lightcoral;
}
.clear {
  clear: both; /* 清除左侧和右侧的浮动元素 */
}

解析：在这种情况下，使用 clear: both 能够确保该段落出现在左浮动和右浮动 div 的下方，无论它们的高度或内容如何。

3. 实战示例与演示

3.1 简单的两列布局

使用浮动可以轻松创建列布局。

.container {
  width: 600px;
  border: 1px solid black;
  overflow: auto; /* 包含浮动，防止高度塌陷 */
}
.column {
  width: 48%; /* 宽度略小于 50% 以容纳边距 */
  margin: 1%;
  padding: 10px;
  border: 1px solid gray;
}
.left { float: left; }
.right { float: right; }
<div class="container">
  <div class="column left">
    <h2>左栏</h2>
    <p>这是左栏的内容。</p>
  </div>
  <div class="column right">
    <h2>右栏</h2>
    <p>这是右栏的内容。</p>
  </div>
</div>

3.2 导航栏

虽然现在 Flexbox 更适合做导航栏，但浮动是传统做法。

<nav class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
.nav {
  background-color: #333;
  overflow: auto; /* 包含浮动 */
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  float: left;
}

.nav a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
}

在此示例中，列表项（list items）向左浮动，从而创建了一个水平导航栏。.nav 元素上的 overflow: auto 确保了导航栏能够“包含”这些浮动的列表项（防止父容器高度塌陷）。

注意： 这只是一个基础示例。对于更复杂的导航栏，使用 Flexbox 或 Grid 布局通常更有利，因为它们能提供更好的布局控制能力和响应性