CSS 中的图片

在本课中，我们将介绍 float（浮动）的概念。我们会了解它在过去是如何被使用的，并学习如何在现代网页开发中正确运用它。

我们将从另一个行内元素 <img> 开始，探讨它与 float CSS 属性之间的关系。

图片是行内元素

图片属于行内元素。本课的第一个示例将展示图片确实是行内元素这一事实。

以下是 HTML、CSS 代码以及对应的输出结果：

图片以行内方式显示，类似于 <span> 元素。实际上，<img> 标签的默认 display 值为 inline-block，这意味着浏览器会保留图片的上下外边距（如果我们通过 CSS 设置了这些边距）。

假设我们希望图片出现在其容器（父级 div）的左侧或右侧，该如何实现？接下来我们将学习这一点。

图片的左浮和右浮

下面是相应的 HTML、CSS 代码以及最终的输出效果。

我们编写了较多的 HTML 内容，目的是为了有足够的文字，以便观察文字如何开始环绕图片。

在过去，浮动是一种广泛使用的布局技巧。

如今，由于有了 Flexbox 和 CSS Grid，一般不推荐使用浮动来构建整体布局，除非是为了让图片浮动。尽管如此，这种技术至今仍被普遍使用。因此，接下来我们将分析浮动在布局中带来的问题，并学习如何解决这些问题。