Основи CSS: вміщуємо дочірні елементи

25

Від автора:Сьогодні ми розглянемо overflow: hidden і clearfix, якими можна змусити батьківський тег div вміщати всі свої дочірні елементи.

Overflow: Hidden

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

А тепер давайте додамо трохи 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; }

Вище ми просто встановлюємо кольору фону і плаваючою бічній панелі і основних div ів ліворуч і праворуч відповідно. Зверніть увагу на «padding-bottom: 2em;». Це дозволить нам бачити червоний фон в самому низу, правильно? Подивіться сторінку на своєму браузері і ви побачите:

Основи CSS: вміщуємо дочірні елементи

Куди подівся червоний фон? Чому він не відображається?

Рішення проблеми

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

#container {
.. other styles
height: 50px; }
#main, #sidebar {
opacity: .5; }

Оновіть ваш браузер і ви побачите:

Основи CSS: вміщуємо дочірні елементи

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

#container {
…other styles
overflow: hidden;
}

Після наступного оновлення ми побачимо:

Основи CSS: вміщуємо дочірні елементи

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

«Намагайтеся, як тільки можливо уникнути установки висоти. Є більш розумний метод».

Рішення – прибрати властивість висоти контейнера. Видаліть наступне властивість.

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

Останнє оновлення і, схоже, наша проблема вирішена.

Основи CSS: вміщуємо дочірні елементи

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

Шліфування

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

Основи CSS: вміщуємо дочірні елементи

Позиціонування кола

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

Основи CSS: вміщуємо дочірні елементи

По-перше, ми робимо посилання на зображення всередині нашого HTML.

Основи CSS: вміщуємо дочірні елементи
…rest of html

Далі повертаємося до таблиці стилів і додаємо наступні стилі.

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

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

Дехто може подумати, що це помістить зображення прямо над правим краєм контейнера div. Однак буде не правий.

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

Основи CSS: вміщуємо дочірні елементи

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

Основи CSS: вміщуємо дочірні елементи

А зараз що за проблема?

Але тепер у нас нова проблема! Тому, що ми застосували 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; }

Може здатися на перший погляд складно, але запевняю вас, що це досить просто.

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

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

visibility: Нам не потрібно бачити крапку, тому прибираємо її зі сторінки. (Еквівалентно налаштуванні непрозорості: 0;)

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

clear: Найважливіша властивість. Перекриває основний і бічний div и. Те ж саме, що додавання несемантического

до нашої сторінці.

height: Не займаємо ніякого місця.

font-size: Запобіжний захід для Firefox. Цей браузер іноді додає трохи простору після нашого батьківського елемента. Лікується установкою розміру шрифту в нуль.

Основи CSS: вміщуємо дочірні елементи

Висновок

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

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

E-mail: co[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.