Diseño
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
Limpiar a la izquierda
Utiliza la utilidad clear-left para posicionar un elemento debajo de cualquier elemento flotante precedente a la izquierda:
Tal vez podamos vivir sin bibliotecas, personas 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 popós en El gato ensombrerado y Los cinco hermanos chinos? ¿Acaso ÉL no se merece algo mejor? Mira. Si piensas que esto se trata de multas por retraso y libros perdidos, mejor piénsalo de nuevo. Esto se trata del derecho de ese niño a leer un libro sin que se le deforme 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>Limpiar a la derecha
Utiliza la utilidad clear-right para posicionar un elemento debajo de cualquier elemento flotante precedente a la derecha:
Tal vez podamos vivir sin bibliotecas, personas 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 popós en El gato ensombrerado y Los cinco hermanos chinos? ¿Acaso ÉL no se merece algo mejor? Mira. Si piensas que esto se trata de multas por retraso y libros perdidos, mejor piénsalo de nuevo. Esto se trata del derecho de ese niño a leer un libro sin que se le deforme 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>Limpiar ambos lados
Utiliza la utilidad clear-both para posicionar un elemento debajo de todos los elementos flotantes precedentes:
Tal vez podamos vivir sin bibliotecas, personas 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 popós en El gato ensombrerado y Los cinco hermanos chinos? ¿Acaso ÉL no se merece algo mejor? Mira. Si piensas que esto se trata de multas por retraso y libros perdidos, mejor piénsalo de nuevo. Esto se trata del derecho de ese niño a leer un libro sin que se le deforme 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>Usar propiedades lógicas
Utiliza las utilidades clear-start y clear-end, que usan propiedades lógicas para asignarse 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>Desactivar la limpieza
Utiliza la utilidad clear-none para restablecer cualquier limpieza aplicada a un elemento:
Tal vez podamos vivir sin bibliotecas, personas 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 popós en El gato ensombrerado y Los cinco hermanos chinos? ¿Acaso ÉL no se merece algo mejor? Mira. Si piensas que esto se trata de multas por retraso y libros perdidos, mejor piénsalo de nuevo. Esto se trata del derecho de ese niño a leer un libro sin que se le deforme 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 responsivo
Antepone a la utilidad clear el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="clear-left md:clear-none ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.