Основы CSS: вмещаем дочерние элементы

Дата публикации: 2010-02-24

overflow

От автора:Сегодня мы рассмотрим overflow: hidden и clearfix, которыми можно заставить родительский тэг div вмещать все свои дочерние элементы.

Overflow: Hidden

Вы когда-нибудь замечали, что когда вы делаете плавающими все дочерние узлы в div, родитель занимает нулевое пространство? Например, в редакторе кода добавим в тэг body следующее:

<div id="container">
  <div id="main">

  </div>
  <div id="sidebar">

  </div>
</div>

</div>

</div>

А теперь давайте добавим немного CSS, чтобы имитировать типичный веб-сайт.

#container {
	background: red;
	width: 800px;
	padding-bottom: 2em; }

#main {
	background: green;
	height: 500px;
	width: 600px;
	float: right; }

#sidebar {
	background: blue;
	height: 500px;
	width: 200px;
	float: left; }

#container {

background: red;

width: 800px;

padding-bottom: 2em; }

#main {

background: green;

height: 500px;

width: 600px;

float: right; }

#sidebar {

background: blue;

height: 500px;

width: 200px;

float: left; }

Выше мы просто устанавливаем цвета фона и плавающей боковой панели и основных div’ов слева и справа соответственно. Обратите внимание на «padding-bottom: 2em;». Это позволит нам видеть красный фон в самом низу, правильно? Посмотрите страницу на своем браузере и вы увидите:

Overflow

Куда девался красный фон? Почему он не отображается?

Решение проблемы

Когда вы делаете плавающими все дочерние элементы, родитель, по существу, не занимает никакого места. Чтобы нагляднее продемонстрировать этот факт, давайте зададим контейнеру произвольную высоту 50px, а затем уменьшим непрозрачность дочерних div’ов настолько, чтобы увидеть внизу красный фон.

#container {
  .. other styles
  height: 50px; }

#main, #sidebar {
  opacity: .5; }

#container {

.. other styles

height: 50px; }

#main, #sidebar {

opacity: .5; }

Обновите ваш браузер и вы увидите:

Overflow

Странно. Мы указали высоту 50px для нашего контейнера div, однако основной (main) и боковой (sidebar ) div’ы явно переполняют границы родителя (container), выглядят неправильно и ведут себя как хотят.

#container {
  ...other styles
  overflow: hidden;
}

#container {

...other styles

overflow: hidden;

}

После следующего обновления мы увидим:

Overflow

Ну, это нам частично помогло. Теперь уже не нужно беспокоиться о дочерних элементах, не слушающихся своего родителя. Но на самом деле это не так уж помогло решить нашу проблему.

«Старайтесь, как только возможно избежать установки высоты. Есть более умный метод».

Решение – убрать свойство высоты контейнера. Удалите следующее свойство.

#container {
  ...other styles
  height: 50px; /* Remove this */
}

#container {

...other styles

height: 50px; /* Remove this */

}

Последнее обновление и, похоже, наша проблема решена.

Overflow

Вы также можете удалить свойства непрозрачности. Они были нужны только в целях наглядности.

Шлифовка

Вышеуказанный метод сработает в большинстве случаев. Однако давайте представим и другой вариант. Например, мы хотим поместить изображение на границе нашего контейнера так, что оно будет перекрывать его. Вы много раз видели этот эффект. Для примера просто используем изображение круга с прозрачным фоном. На настоящем сайте оно может представлять броскую клавишу типа «Купите сейчас» или «Подпишитесь».

Overflow

Позиционирование круга

Давайте с помощью CSS установим изображение в правую верхнюю часть нашего «веб-сайта» так, чтобы оно перекрывало края. Вот что нам нужно:

Overflow

Во-первых, мы делаем ссылку на изображение внутри нашего HTML.

<div id="container">
  <img src="circle.png" alt="Buy Now" />
  ...rest of html

...rest of html

Далее возвращаемся к таблице стилей и добавляем следующие стили.

img {
	position: absolute; 
	right: -100px;
	top: 20px; }

img {

position: absolute;

right: -100px;

top: 20px; }

Контекст позиционирования

Кое-кто может подумать, что это поместит изображение прямо над правым краем контейнера div. Однако будет не прав.

Оттого, что мы не определили контекст позиционирования, вместо него будет использоваться все окно браузера.

Overflow

Очевидно, это не то, что мы хотели. Чтобы определить контекстом позиционирования наш контейнер div, нужно просто добавить «position: relative;» к #container. Как только мы это сделаем, изображение будет позиционироваться относительно нашего div с id=container, а не относительно окна браузера.

Overflow

А сейчас что за проблема?

Но теперь у нас новая проблема! Оттого, что мы применили overflow:hidden к нашему контейнер div, мы, фигурально выражаясь, сами себе прострелили ногу. Как мы можем пересечь границу и назвать элемент, если overflow установлено в hidden? Может быть, просто принять тот факт, что этот конкретный вебсайт не будет разрастаться? Абсолютно нет. В таких случаях стоит применять другой метод.

Прием Clearfix

При помощи этого метода мы используем CSS для добавления содержимого после нашего контейнера div. Это созданное содержимое затем перекроет наш div, таким образом заставив его вмещать дочерние элементы. После этого, очевидно, нам не нужно видеть его содержимое, так что мы должны быть уверены, что спрятали его от просмотра.

Вернитесь в свою таблицу стилей, удалите «overflow: hidden;» из контейнера div, а затем добавьте следующее:

#container {
	... other styles
	_height: 1%; }

#container:after {
	content: ".";
	visibility: hidden;
	display: block;
	clear: both;
	height: 0;
    font-size: 0; }

#container {

... other styles

_height: 1%; }

#container:after {

content: ".";

visibility: hidden;

display: block;

clear: both;

height: 0;

font-size: 0; }

Может показаться на первый взгляд сложно, но уверяю вас, что это довольно просто.

_height: Приводит в действие «haslayout» в Internet Explorer’е, используя прием с символом подчеркивания, непосредственно для IE6.

content: После контейнера div добавляем точку.

visibility: Нам не нужно видеть точку, поэтому убираем ее со страницы. (Эквивалентно настройке непрозрачности: 0;)

display: Заставляем точку отображаться на уровне блока, вместо заданного первоначально уровня строки (inline).

clear: Важнейшее свойство. Перекрывает основной и боковой div’ы. То же самое, что добавление несемантического <div style=»clear: both;»> к нашей странице.

height: Не занимаем никакого места.

font-size: Мера предосторожности для Firefox. Этот браузер иногда добавляет чуть-чуть пространства после нашего родительского элемента. Лечится установкой размера шрифта в ноль.

Overflow

Заключение

Хотя прием overflow:hidden предпочтителен, он не всегда идеален. Вам нужно всегда использовать самое лучшее решение проблемы. Очень важно знать каждый метод, чтобы иметь подходящие инструменты для разгадывания головоломок.

Автор: Jeffrey Way

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Источник: //net.tutsplus.com

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Метки: css, overflow, основы css