返回

文字环绕图片？试试浮动！

前端



在大谈浮动概念之前，相信不少人听说过这样一个说法：浮动是为了实现文字环绕图片而设计的。由于种种原因，即使到了今天，仍有一些开发者将浮动作为实现文字环绕图片的首选。借此机会，让我们重温浮动的设计初衷，并通过一个简单的例子实现文字环绕图片的效果。

实现文字环绕图片的过程很简单：

  1. 为图片元素添加浮动属性，使其脱离标准文档流。
  2. 为图片元素的父元素添加一个清除浮动属性，使其子元素的浮动效果不会影响父元素的高度。

以下是代码示例：

<div class="container">
  <img src="image.jpg" alt="Image" style="float: left;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus tincidunt. Donec tincidunt laoreet enim, vel ullamcorper massa tincidunt sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Integer sodales, augue eu pulvinar tincidunt, leo mauris consequat massa, quis ultricies mi magna eu quam. Donec sed odio eros.</p>
</div>

.container {
  width: 100%;
}

img {
  float: left;
  margin-right: 10px;
}

在上述示例中，图片元素的浮动属性设置为left，使其向左浮动，并与文字元素并排显示。为了防止图片元素的浮动影响父元素的高度，为父元素添加了清除浮动属性。

现在，你已经了解了浮动是如何设计用来实现文字环绕图片的。希望这篇文章能够帮助你对浮动的概念有一个更深入的理解。