Layout
clear
Utilidades para controlar el ajuste del contenido alrededor de un elemento.
| Clase | Estilos |
|---|---|
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; |
Ejemplos
Limpiando a la izquierda
Usa la utilidad clear-left para posicionar un elemento debajo de cualquier elemento flotante izquierdo precedente:
Tal vez podamos vivir sin bibliotecas, gente como tú y yo. Tal vez. Claro, somos demasiado viejos para cambiar el mundo, pero ¿qué pasa con ese niño, sentado, abriendo un libro, ahora mismo, en una sucursal de la biblioteca local y encontrando dibujos de pipís y popis en El Gato en el Sombrero y Los Cinco Hermanos Chinos? ¿No se merece algo mejor? Mira. Si crees que esto se trata de multas por retraso y libros perdidos, será mejor que lo pienses de nuevo. ¡Se trata del derecho de ese niño a leer un libro sin que le deformen la mente! O: tal vez eso te excite, Seinfeld; tal vez así es como te diviertes. Tú y tus amigos de la buena vida.
<article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-left ...">Tal vez podamos vivir sin bibliotecas...</p></article>Limpiando a la derecha
Usa la utilidad clear-right para posicionar un elemento debajo de cualquier elemento flotante derecho precedente:
Tal vez podamos vivir sin bibliotecas, gente como tú y yo. Tal vez. Claro, somos demasiado viejos para cambiar el mundo, pero ¿qué pasa con ese niño, sentado, abriendo un libro, ahora mismo, en una sucursal de la biblioteca local y encontrando dibujos de pipís y popis en El Gato en el Sombrero y Los Cinco Hermanos Chinos? ¿No se merece algo mejor? Mira. Si crees que esto se trata de multas por retraso y libros perdidos, será mejor que lo pienses de nuevo. ¡Se trata del derecho de ese niño a leer un libro sin que le deformen la mente! O: tal vez eso te excite, Seinfeld; tal vez así es como te diviertes. Tú y tus amigos de la buena vida.
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-right ...">Tal vez podamos vivir sin bibliotecas...</p></article>Limpiando todo
Usa la utilidad clear-both para posicionar un elemento debajo de todos los elementos flotantes precedentes:
Tal vez podamos vivir sin bibliotecas, gente como tú y yo. Tal vez. Claro, somos demasiado viejos para cambiar el mundo, pero ¿qué pasa con ese niño, sentado, abriendo un libro, ahora mismo, en una sucursal de la biblioteca local y encontrando dibujos de pipís y popis en El Gato en el Sombrero y Los Cinco Hermanos Chinos? ¿No se merece algo mejor? Mira. Si crees que esto se trata de multas por retraso y libros perdidos, será mejor que lo pienses de nuevo. ¡Se trata del derecho de ese niño a leer un libro sin que le deformen la mente! O: tal vez eso te excite, Seinfeld; tal vez así es como te diviertes. Tú y tus amigos de la buena vida.
<article> <img class="float-left ..." src="/img/snow-mountains.jpg" /> <img class="float-right ..." src="/img/green-mountains.jpg" /> <p class="clear-both ...">Tal vez podamos vivir sin bibliotecas...</p></article>Usando propiedades lógicas
Usa las utilidades clear-start y clear-end, que usan propiedades lógicas para mapear al lado izquierdo o derecho según la dirección del texto:
ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
<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>Deshabilitando limpiezas
Usa la utilidad clear-none para restablecer cualquier limpieza que se aplique a un elemento:
Tal vez podamos vivir sin bibliotecas, gente como tú y yo. Tal vez. Claro, somos demasiado viejos para cambiar el mundo, pero ¿qué pasa con ese niño, sentado, abriendo un libro, ahora mismo, en una sucursal de la biblioteca local y encontrando dibujos de pipís y popis en El Gato en el Sombrero y Los Cinco Hermanos Chinos? ¿No se merece algo mejor? Mira. Si crees que esto se trata de multas por retraso y libros perdidos, será mejor que lo pienses de nuevo. ¡Se trata del derecho de ese niño a leer un libro sin que le deformen la mente! O: tal vez eso te excite, Seinfeld; tal vez así es como te diviertes. Tú y tus amigos de la buena vida.
<article> <img class="float-left ..." src="/img/green-mountains.jpg" /> <img class="float-right ..." src="/img/snow-mountains.jpg" /> <p class="clear-none ...">Tal vez podamos vivir sin bibliotecas...</p></article>Diseño Responsive
Prefija una utilidad clear con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="clear-left md:clear-none ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.