Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible.
El diseño se utiliza para mostrar el contenido con un estilo particular. Por ejemplo, podemos cambiar el diseño del documento usando visualización, flotación, alineación y otras utilidades.
Primer CSS Float Layout se utiliza para establecer la posición de un elemento a la izquierda, a la derecha de su contenedor, además de permitir que el texto y los elementos en línea lo envuelvan. La propiedad float define el flujo de contenido en la página.
Clases usadas:
- .float-left: esta clase se usa para establecer el flotador en el lado izquierdo.
- .float-right: esta clase se usa para establecer el flotador en el lado derecho.
- .clearfix: esta clase se usa para borrar el flotante.
- float-md-left: esta clase se usa para configurar el flotador en el lado izquierdo en una pantalla de tamaño mediano.
- float-md-right: esta clase se usa para configurar el flotador en el lado derecho en una pantalla de tamaño mediano.
Sintaxis:
<div class="clearfix">
<div class="float-*> Content... </div>
</div>
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Layout Floats</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Floats</h3> </div> <div class="clearfix color-bg-accent-emphasis"> <div class="float-left color-bg-success-emphasis"> Floated left Content </div> <div class="float-right color-bg-success-emphasis"> Floated Right Content </div> </div> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Layout Floats</title> <link href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" rel="stylesheet" /> </head> <body> <div class="text-center"> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h3>Primer CSS Layout Floats</h3> </div> <div class="clearfix color-bg-accent-emphasis"> <div class="float-md-left color-bg-success-emphasis"> Floated left Content </div> <div class="float-md-right color-bg-success-emphasis"> Floated Right Content </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/layout#floats