En CSS, el flujo normal es la forma predeterminada que tienen los navegadores web de presentar y colocar los elementos en un documento HTML. Cuando un elemento no tiene indicado ningún tipo de posicionamiento, se ubicará por defecto según si se trata de un elemento de bloque o de línea.
Por defecto, el navegador web mostrará los elementos HTML en el orden exacto en el que aparecen en el código fuente, es decir, colocando los elementos de forma continuada. Si son de línea, los colocará uno al lado del otro, y si son de bloque creará una nueva línea y ocuparán el ancho completo.
La dirección de los elementos de línea va de izquierda a derecha, mientras que en los elementos de bloque va de arriba a abajo. Esto es así en los idiomas como el español o el inglés, cuya escritura es horizontal. En un idioma de escritura vertical, como el japonés, los ejes quedan invertidos.
Cuando se modifica el posicionamiento natural de los elementos para la maquetación web, como sería posicionarlos de forma absoluta, hacerlos flotantes, usar el modelo de cajas flexibles o distribuir elementos con el sistema de cuadrículas, lo que se está haciendo es sacarlos de su flujo normal.
Por tanto, tener un documento HTML bien estructurado es de gran ayuda a nivel de desarrollo web. De hecho, es más fácil trabajar en la forma en la que se presentan los elementos HTML por defecto que tener que luchar contra eso a medida que se hace cambios en el diseño de los diferentes elementos.
Presentación predeterminada
Lo primero que hacen los navegadores web es revisar el contenido de los elementos. A partir de aquí añaden los rellenos, los bordes y los márgenes a su alrededor. De esta forma se establece el modelo de cajas.
En el caso de los elementos de bloque, se colocan en una nueva línea y ocupan el ancho máximo disponible dentro de su elemento contenedor (padre). La altura de este tipo de elementos viene determinada por su contenido. Estos elementos no permiten que otro elemento se coloque a su lado, de ningún tipo.
En cambio, en el caso de los elementos de línea, no solo la altura viene determinada por su contenido, sino que también lo hace su anchura. Por tanto, ocupan el mínimo espacio horizontal. Se puede colocar otros elementos de línea a su lado, mientras que los de bloque saltarían a la línea siguiente.
Hay que puntualizar que los elementos de línea se asientan todos en la misma línea mientras tengan espacio suficiente en la anchura del contenedor. Pero cuando falte espacio, los elementos que desborden bajarán a la línea siguiente.
¿Qué ocurre si dos elementos adyacentes tienen un margen configurado y los dos márgenes se tocan? En este caso, se mantiene el mayor de los dos márgenes, y el menor desaparece. Esto se conoce como combinación de márgenes.
Una de las diferencias más interesantes entre ambos tipos de elementos es que los elementos de bloque pueden contener elementos de bloque y de línea, pero los de línea solo pueden contener otros elementos de línea.
Se puede modificar el comportamiento por defecto de los elementos a partir de la propiedad display y los valores block y inline-block, para que se comporten como elementos de bloque o de línea, respectivamente.
Vamos a ver un ejemplo del flujo normal.
Código HTML:
<p>Esto es un párrafo, elemento de bloque.</p>
<p>Este párrafo también, por tanto empieza en una nueva línea ocupando el ancho completo. Es su comportamiento natural.</p>
<p>En este párrafo añadimos algunos elementos de <span>línea</span>, como texto en <strong>negrita</strong> y en <em>cursiva</em>.</p>
<p>Se puede ver que los elementos de línea se ubican como si fueran caracteres, mientras que los de bloque bajan a la línea siguiente.</p>
Le aplicamos bordes de colores para identificarlos mejor. Los elementos de bloque se verán en color turquesa, y los de línea en color naranja.
Código CSS:
.ejemplo p {
border: 1px solid teal;
padding: 4px 8px;
}
.ejemplo span,
.ejemplo strong,
.ejemplo em {
border: 1px solid #ff7f2a;
padding: 2px;
}
Esto es un párrafo, elemento de bloque.
Este párrafo también, por tanto empieza en una nueva línea ocupando el ancho completo. Es su comportamiento natural.
En este párrafo añadimos algunos elementos de línea, como texto en negrita y en cursiva.
Se puede ver que los elementos de línea se ubican como si fueran caracteres, mientras que los de bloque bajan a la línea siguiente.
Elementos de bloque
A continuación se muestra una lista de los elementos HTML que, por defecto, son de bloque, ocupando todo el espacio disponible de su contenedor.
Se listan en orden alfabético: <address>, <blockquote>, <dd>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <li>, <noscript>, <ol>, <p>, <pre>, <table>, <tbody>, <tfoot>, <thead> y <ul>.
Elementos de línea
En la siguiente lista se describe los elementos HTML que son de línea, y de forma predeterminada se muestran ocupando el mínimo espacio horizontal.
En orden alfabético: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <del>, <dfn>, <em>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <map>, <mark>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt> y <var>.
Métodos de cambio de disposición
En CSS existen varios métodos para modificar la disposición de los elementos HTML, sacándolos de su flujo normal.
Se puede alterar la posición de los elementos HTML mediante la propiedad position. Cuando tiene el valor static, el elemento se ubicará según el flujo normal. Con estas posiciones se sacan del flujo normal: relativa (relative), absoluta (absolute), fija (fixed) y pegajosa (sticky).
Con CSS se puede crear elementos flotantes, que rompen el flujo normal por medio de la colocación de elementos a sus lados, como si se crease un diseño en columnas. Para ello se usa las propiedades float y clear.
Con la propiedad display se puede modificar el formato de visualización de los elementos. Se puede transformar elementos de bloque para que se comporten como si fueran de línea (valor inline-block); y viceversa, que elementos de línea se comporten como si fueran elementos de bloque (valor block).
La misma propiedad también permite transformar elementos para que se comporten como si fueran una tabla de datos, y a la vez, que sus elementos hijos se comporten como celdas. Con el valor table será una tabla como elemento de bloque, y con inline-table será una tabla como elemento de línea.
Con display también es posible crear diseños usando el método de las cajas flexibles (flex), para crear estructuras de una sola dimensión. Con el valor flex se crea una tabla flexible que se comporta como un elemento de bloque, y con inline-flex se comportará como un elemento de línea.
Finalmente, la propiedad display permite maquetar mediante el sistema de cuadrículas (grid), para diseñar estructuras de varias dimensiones. Con el valor grid se crea una cuadrícula que se comporta como un elemento de bloque, y con inline-grid se comportará como un elemento de línea.
La maquetación con columnas también rompe el flujo normal de los elementos. En este caso se usa las propiedades específicas column-count y column-width, para indicar tanto el número de columnas como su anchura.
