Убираем висячие строки с помощью overflow

Свойство overflow может быть использовано для разные вещей, например для правильного отображения блоков текста. Ниже будет продемонстрировано, какую проблему и как может помочь решить свойство overflow. А так же, я думаю, эти ссылки могут быть интересны:

Как получаются висячие строки?

Ниже приведен пример висячей строки в параграфе, где есть рисунок с float:left. Такое часто бывает когда высота текста слегка превышает высоту картинки.

висячая строка

Воспользуемся overflow:hidden для решения этой проблемы. Добавим overflow:hidden в стиль тэга

или в контейнер содержащий его.

убрали висячую строку

Как видите текст не обтекает рисунок. Как это сделано:

HTML

<img src="your_image.jpg" class="thumb" />
<div class="description">
<h3>Заголовок</h3>
<p>какой-то текст...</p>
<p>какой-то текст...</p>
</div>

CSS

.thumb {
float: left;
margin: 5px 20px 20px 0;
padding: 5px;
border: 1px solid #ccc;
background: #f0f0f0;
}
.description {
overflow: hidden;
}

После добавления overflow:hidden в .description элемент перестает обтекать рисунок и страница выглядит гораздо опрятнее.

Пример