CSS高级技巧-文字环绕图片

CSS教程：高级技巧之滑动门与文字环绕图片

在Web视觉设计领域，我们常常借鉴印刷业的排版智慧。其中，文字环绕图片（SandBags）的排版效果，就是一种经典的设计手法。你是否知道如何在CSS中实现这种效果呢？

今天我们要的并不是简单的文字包围图片。尽管其原理与通过float属性实现的效果类似，但实现滑动门技术中的文字环绕图片需要更高级的技巧。我们先来欣赏一下目标效果图：

这种效果并非简单的图片float属性所能达成。要实现这种效果，需要额外的标签和复杂的布局设计。虽然这种方法在视觉上很有吸引力，但它并不符合语义化的网页设计理念。尽管如此，我们仍然可以通过示例代码来了解其实现原理。

HTML代码示例如下：

`

而对应的CSS代码大致如下：

`div.wrap_area { position: relative; } div.wrap_area img { position: absolute; left: 0px; top: 0px; } div.wrap_area p { position: relative; } div.shape_wrap div { float: left; clear: left; height: 20px; }`

掌握CSS的同学们应该已经能从这些代码中看出奥妙。通过float属性将部分div内容提出文档流，然后利用div的堆砌造出一条正文要通过的“渠道”，就像人工开凿的河流一样。这种技术适合于纯视觉化的设计效果。

接下来，我们将CSS的另一高级技巧——布局。在下一篇教程中，我们将深入如何使用CSS进行网页布局设计，包括如何运用各种布局技巧来实现响应式设计和流式布局等。

敬请期待下一篇章：CSS教程——高级技巧之布局。