Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Fundamentos de CSS: Conteniendo Hijos

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

He recibido múltiples solicitudes de tutoriales CSS más sencillos que enseñen los intrincados fundamentos. Esto servirá como la primera entrada en una serie que recibirá nuevas adiciones esporádicamente cada mes. Hoy, estaremos revisando los trucos overflow: hidden, y clearfix para forzar a un div padre a contener a sus hijos.

El Truco de Overflow: Hidden

¿Alguna vez ha notado que cuando flota todos los elementos hijos dentro de un div, el padre ocupa cero espacio? Por ejemplo, en su editor de código, agregando lo siguiente dentro de la etiqueta body.

Ahora, vamos a añadir un poco de CSS para simular un sitio web típico.

Arriba, simplemente estamos estableciendo colores de fondo y flotando la barra lateral y divs principales a la izquierda y derecha, respectivamente. Tenga en cuenta el "padding-bottom: 2em;". Esto debería permitirnos ver el fondo rojo en la parte inferior, ¿verdad? Vea la página en su navegador y verá:

No Overflow Applied

¿A dónde fue el fondo rojo? ¿Por qué no se muestra?

La Solución

Cuando flota todos los elementos hijo, el padre esencialmente no ocupa espacio. Para ilustrar mejor este hecho, establezcamos una altura arbitraria de 50px para el contenedor y, a continuación, reduzca la opacidad de los div hijo para que podamos ver el fondo rojo debajo.

Actualice su navegador y usted verá:

Not Contained

 Que extraño. Hemos especificado una altura de 50px para nuestro div contenedor, sin embargo, el div principal y el div sidebar desbordan descaradamente sus fronteras, como si fueran divs malcriados y maleducados.

Vuelva a su hoja de estilos y aplique un estilo:

Después de otra actualización, vemos:

Not Contained

Bueno, eso ayuda en parte. Ahora, no tenemos que preocuparnos de los niños adolescentes desobedeciendo a sus padres. Dicho esto, esto realmente no nos ayuda en nuestra situación.

"Trate de evitar especificar las alturas tanto como sea posible. Por lo general hay un método más inteligente.

La solución es extraer la propiedad altura de nuestro contenedor. Remueva la siguiente propiedad.

Una última actualización, y nuestro problema parece estar arreglado.

Overflow Applied
Usted también puede eliminar las propiedades de opacidad. Sólo eran para fines de demostración.

El Obstáculo

El método demostrado anteriormente funcionará en la mayoría de los casos. Sin embargo, vamos a introducir otra variable. ¿Qué pasa si queremos posicionar una imagen en el borde de nuestro contenedor, de modo que se superponga. Usted ha visto este efecto muchas veces. Para presentar el ejemplo, sólo usaremos una imagen de un círculo con un fondo transparente. En un sitio real, esto podría representar un botón "Comprar ahora" o "Registrarse" - algo cursi por ese estilo.

Circle

Posicionando el Círculo

Utilizando CSS, posicionemos la imagen en la parte superior derecha de nuestro "sitio web", superponiendo los bordes. Esto es lo que queremos:

Breaking Boundaries

Primero, hacemos referencia a la imagen dentro de nuestro HTML.

A continuación, vuelva a su hoja de estilos y agregue los siguientes estilos.

Posicionando el Contexto

Uno podría pensar que esto colocará la imagen justo sobre el borde derecho del div contenedor. Sin embargo, estaría equivocado.

Ya que no hemos establecido un contexto de posicionamiento, la ventana se utilizará en su lugar.

No positioning context set

Obviamente, esto no es lo que queremos. Para aplicar un contexto de posicionamiento a nuestro div contenedor, simplemente agregue "position: relative;" a  #container. Una vez que lo hayamos hecho, la imagen ya no usará la ventana como referencia.

Lost Half

¿Cuál es el Problema Ahora?

¡Pero ahora, tenemos un nuevo problema! Como pusimos overflow: hidden a nuestro div contenedor, nos hemos disparado un poco en el pie. ¿Cómo rompemos fronteras y cinquistamos si el overflow (desbordamiento) está configurado como hidden (oculto)? ¿Debemos aceptar simplemente que este sitio web particular no podrá ganar el día hoy? Absolutamente no. En estos casos, vale la pena usar un método diferente.

El Truco de Clearfix

Con este método, usaremos CSS para agregar contenido después de nuestro div contenedo. Este contenido creado entonces borrará nuestro div, forzándolo así a contener a sus niños. Ahora obviamente no queremos ver este contenido, así que debemos estar seguros de ocultarlo de la persona viéndolo.

Vuelva a su hoja de estilo, quite "overflow: hidden;" de su div contenedor, y agregue lo siguiente:

Esto puede parecer complicado, pero le aseguro que es bastante simple.

  • _height: desencadena "haslayout" en Internet Explorer, utilizando el truco del guión bajo para apuntar directamente a IE6.
  • content: Después del div contenedor agregue un punto.
  • visibility: No queremos ver el punto, así que escóndalo de la página. (Igual a establecer opacity: 0;)
  • display: Fuerza el punto a mostrarse como un elemento de nivel de bloque, en lugar de elemento en línea.
  • clear: La propiedad importante. Esto limpia los divs principal y de la barra lateral. Esto es lo mismo que añadir un <div style="clear:both;"> no semántico a nuestra página.
  • height: No ocupe ningún espacio.
  • font-size: Sólo una precaución para Firefox. Este navegador a veces agrega un poco de espacio después de nuestro elemento padre. Estableciendo el tamaño de fuente a cero lo corrige esto.
Perfect

Conclusión

A pesar de que el truco de overflow:hidden es preferible, no siempre es ideal. Es necesario utilizar la mejor solución para la tarea a mano. Lo importante es aprender cada método, para que usted tenga las herramientas para resolver el rompecabezas.

  • Síganos en Twitter, o suscríbase al Canal RSS de NETTUTS para más información diaria acerca de tutoriales y artículos de desarrollo web.


Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.