Se sabe que los elementos HTML como div , párrafos , textos , etc. crecen para adaptarse al contenido de su hijo. Pero si el hijo de esos elementos flota hacia la derecha o hacia la izquierda, los padres pueden colapsar . Es decir, perderán su comportamiento real.
Entendamos esto con un ejemplo : considere el siguiente código. En el siguiente programa, un div principal con un fondo verde tiene otros 6 elementos div secundarios. Ninguno de los padres o hijos flota aquí. Vamos a compilar y ver el resultado del código.
html
<!DOCTYPE>
<html>
<head>
<title>Floats and collapsing parents</title>
<style>
div{
padding: 5px;
}
</style>
</head>
<body>
<!-- Parent Div -->
<div style="background-color: green;">
<!-- Children div's begins -->
<div>HTML5</div>
<div>CSS3</div>
<div>JavaScript</div>
<div>Python</div>
<div>MySQL</div>
<div>MongoDB</div>
<!-- Children div's ends -->
</div>
</body>
</html>
Producción
:
Ahora hagamos que todos los div secundarios en el código anterior floten hacia la izquierda y veamos la diferencia en el resultado:
html
<!DOCTYPE>
<html>
<head>
<title>Floats and collapsing parents</title>
<style>
div{
padding: 5px;
}
</style>
</head>
<body>
<!-- Parent Div -->
<div style="background-color: green;">
<!-- Children div's begins, floated to left -->
<div style="float: left;">HTML5</div>
<div style="float: left;">CSS3</div>
<div style="float: left;">JavaScript</div>
<div style="float: left;">Python</div>
<div style="float: left;">MySQL</div>
<div style="float: left;">MongoDB</div>
<!-- Children div's ends -->
</div>
</body>
</html>
Producción
:
Puede ver claramente en la salida que el
la división principal está colapsada
y pierde su fondo verde.
Hay muchas formas de evitar que el padre de los elementos flotantes colapse en CSS:
- Método 1 (Uso de la propiedad de desbordamiento): podemos usar la propiedad de desbordamiento de CSS para evitar que los padres colapsen. Establezca el valor de la propiedad de desbordamiento como «automático» para el padre y ya no colapsará. Apliquemos esto en el código afectado que se muestra arriba y veamos el resultado.
html
<!DOCTYPE><html><head><title>Floats and collapsing parents</title><style>div{padding: 5px;}</style></head><body><!-- Parent Div --><!-- Using overflow: auto; for parent --><divstyle="background-color: green; overflow: auto"><!-- Children div's begins, floated to left --><divstyle="float: left;">HTML5</div><divstyle="float: left;">CSS3</div><divstyle="float: left;">JavaScript</div><divstyle="float: left;">Python</div><divstyle="float: left;">MySQL</div><divstyle="float: left;">MongoDB</div><!-- Children div's ends --></div></body></html>Salida :
-
Método 2 (hacer que el padre flote): el segundo método es hacer que el padre también flote de acuerdo con los elementos secundarios. Esto también ayudará a evitar que el padre colapse. Pero un inconveniente es que tendrá que hacer que todos los padres floten, es decir, el padre afectado actual, el padre del padre afectado actual, etc.
Por ahora, cambiemos el elemento principal para que flote hacia la izquierda de acuerdo con otros divs secundarios y veamos el resultado:
html
<!DOCTYPE><html><head><title>Floats and collapsing parents</title><style>div{padding: 5px;}</style></head><body><!-- Parent Div --><!-- Making the parent also floated toprevent collapsing --><divstyle="background-color: green; float: left"><!-- Children div's begins, floated to left --><divstyle="float: left;">HTML5</div><divstyle="float: left;">CSS3</div><divstyle="float: left;">JavaScript</div><divstyle="float: left;">Python</div><divstyle="float: left;">MySQL</div><divstyle="float: left;">MongoDB</div><!-- Children div's ends --></div></body></html>Salida :
- Método 3 (Especificar la altura de forma explícita): También se puede fijar la altura del padre colapsado explícitamente para evitar que se colapse. El problema con esta solución es que si se cambia el tamaño del navegador o si los tamaños de los niños cambian en el futuro, entonces el padre puede colapsar nuevamente.
html
<!DOCTYPE><html><head><title>Floats and collapsing parents</title><style>div{padding: 5px;}</style></head><body><!-- Parent Div --><!-- Specifying height for parent explicitly toprevent collapsing --><divstyle="background-color: green; height: 30px"><!-- Children div's begins, floated to left --><divstyle="float: left;">HTML5</div><divstyle="float: left;">CSS3</div><divstyle="float: left;">JavaScript</div><divstyle="float: left;">Python</div><divstyle="float: left;">MySQL</div><divstyle="float: left;">MongoDB</div><!-- Children div's ends --></div></body></html>Salida :
- Método 4 (usando las propiedades de visualización y limpieza): También se pueden usar las propiedades de visualización y limpieza al mismo tiempo para que el padre evite que se colapse. Especifique “ mostrar: tabla; ” y “ claro: ambos; ” para el padre y ver la diferencia:
html
<!DOCTYPE><html><head><title> Floats and collapsing parents </title><style>div{padding: 5px;}</style></head><body><!-- Parent Div --><!-- Using display and clear property toprevent collapsing --><divstyle="background-color: green; display: table; clear: both; "><!-- Children div's begins, floated to left --><divstyle="float: left;">HTML5</div><divstyle="float: left;">CSS3</div><divstyle="float: left;">JavaScript</div><divstyle="float: left;">Python</div><divstyle="float: left;">MySQL</div><divstyle="float: left;">MongoDB</div><!-- Children div's ends --></div></body></html>Salida :
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA