Рядкові контейнери та очищення CSS

Рядкові контейнери, розташовані поряд з плаваючими, коротшають таким чином, щоб надати місце для останніх. При цьому рядковий контейнер обтікає плаваючий блок. Плаваючі контейнери були розроблені спеціально для того, щоб текст міг обтікати зображення.

Щоб рядкові контейнери не обтікали плаваючий контейнер, їм потрібно привласнити властивість clear (очищення). Воно може мати значення left (ліворуч), right (праворуч), both (обидві) або none (немає). Значення вказує, яка сторона рядкового контейнера не повинна обтікати плаваючий блоковий контейнер.
<style type="text/css">
.bloc{ float: left; width: 100px; height: 100px }
</style>
<body>
<div class="bloc">block</div>
<p>text text text text text text text text text text text text</p>
<p style="clear: left">text text text text text text text text text text text text</p>
</body>

Цього ж результату можна досягти, залишивши достатньо місця над рядковим елементом. Для цього потрібно створити в рядковому контейнері верхню зовнішню смужку, досить широку для того, щоб вона витіснила рамку вертикально вниз.
<p style="margin-top: 50px">text text text text text text text text text text text text</p>


Плаваючі елементи витягуються з потоку документа і не впливають на навколишні елементи. Обтікання і очищення є винятками з цих правила. З їх допомогою можна надати достатньо місця плаваючим елементам в потоці тексту.

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

Розглянемо плаваючі елементи та очищення докладніше. Припустимо, плаваючий блоковий малюнок повинен бути розташований ліворуч від плаваючого блочного тексту. Малюнок і текст розміщені в контейнері.
div{ background-color: gray }
div img{ float: left }
div p{ float: right }

Здавалося б, все розміщено правильно. Проте ми не врахували, що плаваючі елементи витягуються з потоку документа. Отже, вони "випали" з контейнера "div", його висота стала рівною нулю.

Як же створити оболонку, що охоплює плаваючий елемент? Для цього потрібно де-небудь в елементі застосувати властивість "clear".
<div>
<img src="images.jpg" width="100" />
<p>text text text</p>
<div style="clear: both"></div>
</div>


Додавання порожнього коду в розмітку - не настільки невинне заняття, як може здатися на перший погляд. У багатьох випадках він може породити серйозні проблеми. На практиці, іноді, все ж існують елементи, яким можна присвоїти властивість "clear", проте так буває далеко не завжди.

Рішення проблеми досить просте: замість очищення плаваючих елементів (зображення і тексту) можна зробити плаваючим контейнер "div".
div{ float: left; background-color: gray }
div img{ float: left }
div p{ float: right }

Здавалося б, бажаний результат отримано, проте тепер плаваючий контейнер "div" впливатиме на наступний елемент сторінки. Для вирішення цієї проблеми деякі розробники роблять плаваючими майже всі елементи макета, а потім очищують їх за допомогою якого-небудь елементу (часто використовуючи для цього нижній колонтитул сторінки). Такий спосіб істотно зменшує обсяг додаткової розмітки. Його недолік полягає в тому, що плаваючі елементи ускладнюють розмітку. Крім того, деякі застарілі браузери не можуть обробити велику кількість плаваючих елементів.

Псевдоклас ":after" можна застосувати в поєднанні з оголошенням вмісту для додавання нового вмісту в кінець існуючого. В якості нового вмісту зазвичай використовується символ "крапка", оскільки він невеликий і ненав'язливий. Новий вміст не повинен займати простір по вертикалі або виводитися на екран, тому потрібно встановити його висоту рівну 0 і привласнити його властивості "visibility" значення "hidden". Оскільки очищені елементи мають верхні зовнішні смужки, що займають простір по вертикалі, властивість "display" генерованого вмісту повинно мати значення "block". Виконавши всі ці формальності, можна легко очистити генеруємий вміст.
.clear:after{ content: "."; height: 0; visibility: hidden; display: block; clear: both }
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

Корисне

Розклад руху автобусів міста Ковель

Статистика: