Layout
float
Utilidades para controlar el ajuste del contenido alrededor de un elemento.
| Clase | Estilos |
|---|---|
float-right | float: right; |
float-left | float: left; |
float-start | float: inline-start; |
float-end | float: inline-end; |
float-none | float: none; |
Ejemplos
Flotar elementos a la derecha
Usa la utilidad float-right para flotar un elemento a la derecha de su contenedor:
Quizás podamos vivir sin bibliotecas, gente como tú y yo. Quizás. 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 merece ÉL algo mejor? Mira. Si crees que esto se trata de multas vencidas y libros perdidos, piénsalo de nuevo. ¡Se trata del derecho de ese niño a leer un libro sin que le laven el cerebro! O: quizás eso te excite, Seinfeld; quizás así es como te diviertes. Tú y tus amigotes.
<article> <img class="float-right ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>Flotar elementos a la izquierda
Usa la utilidad float-left para flotar un elemento a la izquierda de su contenedor:
Quizás podamos vivir sin bibliotecas, gente como tú y yo. Quizás. 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 merece ÉL algo mejor? Mira. Si crees que esto se trata de multas vencidas y libros perdidos, piénsalo de nuevo. ¡Se trata del derecho de ese niño a leer un libro sin que le laven el cerebro! O: quizás eso te excite, Seinfeld; quizás así es como te diviertes. Tú y tus amigotes.
<article> <img class="float-left ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>Usando propiedades lógicas
Usa las utilidades float-start y float-end, que usan propiedades lógicas para mapear al lado izquierdo o derecho según la dirección del texto:
left-to-right
Quizás podamos vivir sin bibliotecas, gente como tú y yo. Quizás. 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 merece ÉL algo mejor? Mira. Si crees que esto se trata de multas vencidas y libros perdidos, piénsalo de nuevo. ¡Se trata del derecho de ese niño a leer un libro sin que le laven el cerebro! O: quizás eso te excite, Seinfeld; quizás así es como te diviertes. Tú y tus amigotes.
right-to-left
ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد، نحن أكبر من أن نغير العالم، ولكن ماذا عن ذلك الطفل الذي يجلس ويفتح كتابًا الآن في أحد فروع المكتبة المحلية ويجد رسومات للتبول والبول على القطة في القبعة والإخوة الصينيون الخمسة؟ ألا يستحق الأفضل؟ ينظر. إذا كنت تعتقد أن الأمر يتعلق بالغرامات المتأخرة والكتب المفقودة، فمن الأفضل أن تفكر مرة أخرى. يتعلق الأمر بحق ذلك الطفل في قراءة كتاب دون أن يتشوه عقله! أو: ربما يثيرك هذا يا سينفيلد؛ ربما هذه هي الطريقة التي تحصل بها على ركلاتك. أنت ورفاقك الطيبين.
<article> <img class="float-start ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article><article dir="rtl"> <img class="float-start ..." src="/img/mountains.jpg" /> <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p></article>Deshabilitar un float
Usa la utilidad float-none para restablecer cualquier float que se aplique a un elemento:
Quizás podamos vivir sin bibliotecas, gente como tú y yo. Quizás. 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 merece ÉL algo mejor? Mira. Si crees que esto se trata de multas vencidas y libros perdidos, piénsalo de nuevo. ¡Se trata del derecho de ese niño a leer un libro sin que le laven el cerebro! O: quizás eso te excite, Seinfeld; quizás así es como te diviertes. Tú y tus amigotes.
<article> <img class="float-none ..." src="/img/mountains.jpg" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>Responsive design
Prefija una utilidad float con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<img class="float-right md:float-left" src="/img/mountains.jpg" />Aprende más sobre el uso de variantes en la documentación de variantes.