Макет
clear
Утилиты для управления обтеканием контента вокруг элемента.
| Class | Styles |
|---|---|
clear-left | clear: left; |
clear-right | clear: right; |
clear-both | clear: both; |
clear-start | clear: inline-start; |
clear-end | clear: inline-end; |
clear-none | clear: none; |
Примеры
Очистка слева
Используйте утилиту clear-left для позиционирования элемента ниже любых предшествующих элементов с плавающим позиционированием слева:
Возможно, мы можем жить без библиотек, такие люди, как вы и я. Возможно. Конечно, мы слишком стары, чтобы изменить мир, но что насчет того ребенка, который сейчас сидит, открывает книгу в отделении местной библиотеки и находит рисунки с неприличными изображениями в "Коте в шляпе" и "Пяти китайских братьях"? Разве он не заслуживает лучшего? Послушайте. Если вы думаете, что это касается просроченных штрафов и потерянных книг, вам лучше подумать еще раз. Это касается права того ребенка читать книгу, не искажая свой разум! Или: может быть, это вас возбуждает, Сайнфелд; может быть, так вы получаете свои удовольствия. Вы и ваши приятели для веселья.
<article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-left ...">Возможно, мы можем жить без библиотек...</p></article>Очистка справа
Используйте утилиту clear-right для позиционирования элемента ниже любых предшествующих элементов с плавающим позиционированием справа:
Возможно, мы можем жить без библиотек, такие люди, как вы и я. Возможно. Конечно, мы слишком стары, чтобы изменить мир, но что насчет того ребенка, который сейчас сидит, открывает книгу в отделении местной библиотеки и находит рисунки с неприличными изображениями в "Коте в шляпе" и "Пяти китайских братьях"? Разве он не заслуживает лучшего? Послушайте. Если вы думаете, что это касается просроченных штрафов и потерянных книг, вам лучше подумать еще раз. Это касается права того ребенка читать книгу, не искажая свой разум! Или: может быть, это вас возбуждает, Сайнфелд; может быть, так вы получаете свои удовольствия. Вы и ваши приятели для веселья.
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-right ...">Возможно, мы можем жить без библиотек...</p></article>Очистка с обеих сторон
Используйте утилиту clear-both для позиционирования элемента ниже всех предшествующих элементов с плавающим позиционированием:
Возможно, мы можем жить без библиотек, такие люди, как вы и я. Возможно. Конечно, мы слишком стары, чтобы изменить мир, но что насчет того ребенка, который сейчас сидит, открывает книгу в отделении местной библиотеки и находит рисунки с неприличными изображениями в "Коте в шляпе" и "Пяти китайских братьях"? Разве он не заслуживает лучшего? Послушайте. Если вы думаете, что это касается просроченных штрафов и потерянных книг, вам лучше подумать еще раз. Это касается права того ребенка читать книгу, не искажая свой разум! Или: может быть, это вас возбуждает, Сайнфелд; может быть, так вы получаете свои удовольствия. Вы и ваши приятели для веселья.
<article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-both ...">Возможно, мы можем жить без библиотек...</p></article>Использование логических свойств
Используйте утилиты clear-start и clear-end, которые используют логические свойства для сопоставления с левой или правой стороной в зависимости от направления текста:
ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
<article dir="rtl"> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-end ...">...ربما يمكننا العيش بدون مكتبات،</p></article>Отключение очистки
Используйте утилиту clear-none для сброса любых очисток, примененных к элементу:
Возможно, мы можем жить без библиотек, такие люди, как вы и я. Возможно. Конечно, мы слишком стары, чтобы изменить мир, но что насчет того ребенка, который сейчас сидит, открывает книгу в отделении местной библиотеки и находит рисунки с неприличными изображениями в "Коте в шляпе" и "Пяти китайских братьях"? Разве он не заслуживает лучшего? Послушайте. Если вы думаете, что это касается просроченных штрафов и потерянных книг, вам лучше подумать еще раз. Это касается права того ребенка читать книгу, не искажая свой разум! Или: может быть, это вас возбуждает, Сайнфелд; может быть, так вы получаете свои удовольствия. Вы и ваши приятели для веселья.
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-none ...">Возможно, мы можем жить без библиотек...</p></article>Адаптивный дизайн
Префикс a clear утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<p class="clear-left md:clear-none ..."> Lorem ipsum dolor sit amet...</p>Подробнее об использовании вариантов читайте в документации по вариантам.