in

Diseño CSS: flotante y claro

pineapple

El CSS float propiedad especifica cómo debe flotar un elemento.

El CSS clear La propiedad especifica qué elementos pueden flotar junto al elemento despejado y en qué lado.


La propiedad flotante

los float La propiedad se utiliza para posicionar y dar formato al contenido, por ejemplo, dejar que una imagen flote a la izquierda del texto en un contenedor.

los float La propiedad puede tener uno de los siguientes valores:

  • left – El elemento flota a la izquierda de su contenedor.
  • right – El elemento flota a la derecha de su contenedor.
  • none – El elemento no flota (se mostrará justo donde aparece en el texto). Esto es predeterminado
  • inherit – El elemento hereda el valor flotante de su padre

En su uso más simple, el float La propiedad se puede utilizar para ajustar texto alrededor de imágenes.


Ejemplo – flotar: derecha;

El siguiente ejemplo especifica que una imagen debe flotar hacia el Derecha en un texto:

PiñaLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Mecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac …


Ejemplo – flotar: izquierda;

El siguiente ejemplo especifica que una imagen debe flotar hacia el izquierda en un texto:

PiñaLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Mecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac …


Ejemplo: sin flotación

En el siguiente ejemplo, la imagen se mostrará justo donde aparece en el texto (float: none;):

Piña
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Mecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac …


Ejemplo: flotar uno al lado del otro

Normalmente, los elementos div se mostrarán uno encima del otro. Sin embargo, si usamos float: left podemos dejar que los elementos floten uno al lado del otro:

Ejemplo

div {
flotador izquierdo;
relleno: 15px;
}

.div1 {

fondo: rojo;
}

.div2 {
fondo: amarillo;
}

.div3 {
fondo: verde;
}

Inténtalo tú mismo »

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

social og advertising logo 1200x628

Medición de foso de Oracle | Publicidad de Oracle

C booleano – javatpoint