Убираем висячие строки с помощью overflow
Свойство overflow может быть использовано для разные вещей, например для правильного отображения блоков текста. Ниже будет продемонстрировано, какую проблему и как может помочь решить свойство overflow. А так же, я думаю, эти ссылки могут быть интересны:
- The CSS Overflow Property – CSS Tricks
- The Overflow Declaration – Quirks Mode
- Clearing Floats – Quirks Mode
Как получаются висячие строки?
Ниже приведен пример висячей строки в параграфе, где есть рисунок с 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 элемент перестает обтекать рисунок и страница выглядит гораздо опрятнее.