Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases flotantes de fregadero de cocina en Foundation CSS.
La clase flotante se usa para agregar el comportamiento flotante a los elementos, ya sea a la izquierda o a la derecha del diseño. Para borrar los flotantes, podemos usar la clase .clearfix para el elemento principal.
Clases de flotador de fregadero de cocina Foundation CSS :
- clearfix : esta clase se puede usar con el elemento principal para borrar el flotante.
- float-left: esta clase se usa para hacer flotar el elemento al lado izquierdo del diseño.
- float-right: esta clase se usa para hacer flotar el elemento al lado derecho del diseño.
Sintaxis:
<div class="callout clearfix"> <a class="button float-left">Left</a> <a class="button float-right">Right</a> </div>
Ejemplo 1: El siguiente ejemplo ilustra el uso de clases flotantes de fregadero de cocina usando la clase flotante izquierda .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Float</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h2 class="centre" style="color:green"> GeeksforGeeks </h2> <h5 class="centre"> Kitchen Sink Float Left </h5> <div class="callout clearfix"> <a class="button float-left success">Left</a> </div> </body> </html>
Producción:
Fregadero de cocina Float-left Class
Ejemplo 2: El siguiente ejemplo ilustra el uso de clases flotantes de fregadero de cocina usando la clase flotante derecha .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Kitchen Sink Float</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body> <h2 class="centre" style="color:green"> GeeksforGeeks </h2> <h5 class="centre"> Kitchen Sink Float Right </h5> <div class="callout clearfix"> <a class="button float-right success"> RightGeek </a> </div> </body> </html>
Producción:
Flotador para fregadero de cocina Foundation CSS
Enlace de referencia: https://get.foundation/sites/docs/kitchen-sink.html#float-classes
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA