Para comenzar, es necesario tener claro el siguiente concepto: Todos los elementos de HTML son cajas. Algunas de ellas (elementos como los divs, párrafos, títulos, entre otros) son renderizadas por el navegador para ocupar todo el ancho de la ventana, colocar un salto de línea encima y debajo de si mismo y así termina uno encima de otro. Otros tales como las imágenes, los enlaces, los spans, su ancho solo ocupa el contenido que tengan adentro y dejan colocar otras "cajas" al lado de ellas.
Para controlar este comportamiento, las primeras tres propiedades que se deben conocer son el display, clear y float.
Display
La propiedad display especifica como debe mostrarse un elemento. Sus principales valores son:
| Propiedad | Valores | Explicación |
|---|---|---|
| Display | block | Al definir este valor, el elemento ocupa todo el ancho del elemento que lo contiene y tiene un salto de línea arriba y abajo forzando que los siguientes elementos queden debajo de él. Sin embargo, con las propiedades clear y float puedo cambiar este comportamiento para habilitar la posibilidad de colocar otros elementos al lado de el. Los elementos con display:block permiten definirles el ancho y alto. |
| inline | Los elementos con valor display:inline solamente ocupan el ancho de su contenido, no tienen salto de línea y por lo tanto permiten que otros elementos se ubiquen al lado. Los elementos con display:inline ignoran los valores de width y height que se les defina. |
|
| inline-block | Con este valor, el comportamiento del elemento es parecido a cuando es inline en cuanto a que no tiene saltos de línea y deja ubicar otros elementos alrededor de el. La ventaja es que si permite definirle propiedades de ancho y alto. | |
| none | Este valor permite esconder el elemento al que se le aplique y este no deja ningún espacio en blanco. También se puede esconder elementos con la propeidad visibility:hidden pero al hacerlo de esta forma, si queda el espacio en blanco en la página. Sin embargo es importante aclarar que el código si queda en el html y si se carga toda la información que esté dentro de él. |
Estos son los valores principales. Sin embargo, si quiere conocer todos los valores disponibles puede ir a este enlace en web plataform
Clear
La propiedad clear especifica a que lado del elemento (izquierda, derecha o ambos) NO deja ubicar otros elementos que tengan la propiedad float definida. Esta última condición es muy importante ya que el clear es como si fuera simplemente una intención: Uno puede tener la intención dejar que un elemento se haga al lado del otro, pero es necesario definir el float para que esto suceda. Sus principales valores son:
| Propiedad | Valores | Explicación |
|---|---|---|
| Clear | both | No permite que ningún elemento con float definido se haga a ninguno de sus dos lados. |
| none | Permite que un elemento con float definido se haga a cualquiera de sus dos lados. Este es el valor por defecto |
|
| left | No permite que los elementos con float definido se hagan a su izquierda. | |
| right | No permite que los elementos con float definido se hagan a su derecha. |
Float
La propiedad float especifica hacia que lado debe "alinearse" o flotar. Esto sucede hacia la izquierda o la derecha del elemento que lo contiene. Si el mismo y sus vecinos tienen definida la propiedad clear:none, tratarán de ubicarse uno al lado del otro siempre y cuando haya espacio dentro del elemento que los contiene. Sus principales valores son:
| Propiedad | Valores | Explicación |
|---|---|---|
| Float | left | El elemento se "alinea" o flota hacia la izquierda. |
| right | El elemento se "alinea" o flota hacia la derecha. |
|
| none | El elemento no flota y no se ubica a ningún lado de los otros elementos. Simplemente se queda abajo. Este es el valor por defecto. |
Tips
Al conocer estas tres propiedades, se puede concluir lo siguiente:
Si se quiere que los elementos HTML queden uno sobre otro los valores que deben tener son:
elemento{
display:block;
clear:both;
float:left o right según el caso
}
Si se quiere que los elementos HTML queden uno al lado del otro los valores que deben tener son:
elemento{
display:block;
clear:none;
float:left o right según el caso
}
