Overflow是我们前端制作中经常会用到的一条CSS属性，它的作用是规定内容溢出元素框时CSS的渲染方式。渲染规则共有visible、hidden、scroll和auto四种方式。

但是它的作用不仅仅在于此，在日常的前端工作中，它还有很多妙用，比如可以用来清除浮动等等。下面有一些很不错的参考资料，便于我们全面的了解这个属性。

Overflow 属性参考 | http://www.w3school.com.cn/css/pr_pos_overflow.asp

CSS Overflow 属性详解 | 原文 – 译文

Overflow 属性及IE6的错误解析 | http://www.quirksmode.org/css/overflow.html

使用Overflow来清除浮动 | 简单谈谈清浮动

上面这些还不够？好吧，这些都不是本文的重点，这里我们推荐另外的一条使用Overflow属性的小技巧，简单而实用。

涉及到文本排版时，我们有时会遇到由于图片浮动而产生的孤行现象(也叫页末单行段落)，如图。

而我们不想要这种效果，我们想要它更整齐，像这样：

一般来讲，遇到这种情况我们只好在右侧文本的外面再加一层容器，使其浮动来避免孤行的出现。而现在，使用overflow可以很简单的消灭孤行，且不用额外增加容器元素。

一切都很简单。

Html：

1
2
3
4

<div id="demo"> 
    <img src="image.jpg" class="thumb">
    <p>这里是文本内容。</p>
</div>

CSS：

1
2
3
4
5
6
7

.thumb {
    float: left;
    margin: 5px 20px 20px 0;
    padding: 10px;
    background: #EFEDEE;
}
#demo p {overflow: hidden;}

给右侧段落增加了overflow:hidden的属性后，就能有效避免孤行的出现啦，而且不用增加额外的元素哦。

下面是DEMO：

东街和西街是连着的，很长。旧时的石子路已经消失了十几年了，但是走在这里，你依旧会觉着这是条老街。
老街很窄，有的地方很是弯弯曲曲的，总是望不了多远。街一侧的房子都是临河的，时不时的有船经过，很难安静下来。这一侧的房子都很矮，很小，只一两层几平米的房子就住着一户人家，多是一两个老人，有感情了，舍不得搬。