En este artículo, veremos qué es la contención flotante en CSS.
La contención flotante de CSS se utiliza para mejorar el rendimiento de las páginas web al aislar la subparte de la página del resto de la página. Una vez que los navegadores saben que una determinada parte del código es independiente, su representación puede optimizarse, lo que mejora el rendimiento.
La contención CSS Float define la propiedad CSS de contenido.
La propiedad de contenido de CSS permite indicar que el elemento y sus descendientes se consideran independientes del árbol del documento tanto como sea posible. Esto tiene claras ventajas de eficiencia porque permite que el navegador vuelva a calcular el diseño, el estilo, el color, el tamaño o cualquier combinación de ellos para una pequeña parte del DOM en lugar de la página completa. El uso típico de esta propiedad es para un elemento que contiene contenido de algún tipo.
Sintaxis:
element {
contain: none | strict | content |
[ size || layout || style || paint ];
}
Valores de palabras clave:
- ninguno: no se aplicó ninguna contención al elemento.
- tamaño: afecta el cálculo del tamaño de la página ya que se puede dimensionar el elemento sin necesidad de examinar los tamaños de sus descendientes.
- diseño: ayuda en cómo el elemento se relaciona con otros elementos en la página asegurándose de que nada fuera del elemento pueda afectar su diseño interno y viceversa.
- estilo: indica que las propiedades con efectos en más de un elemento y sus descendientes no escapan al elemento contenedor.
- pintura: ayuda en cómo se pinta un elemento en la pantalla, ya que los descendientes del elemento no aparecen fuera de sus límites. Si el cuadro contenedor está fuera de la pantalla, el navegador no necesita pintar los elementos que contiene; estos también deben estar fuera de la pantalla porque están completamente contenidos en ese cuadro. Si un descendiente excede los límites del elemento contenedor, se recortará al cuadro de borde del elemento contenedor.
- estricto: Es la combinación de los valores de contención de diseño, pintura y tamaño.
- contenido: Es la combinación de los valores de contención del trazado y de las pinturas.
Nota 1: la propiedad de contenido con valores pintura, estricto o contenido creará un nuevo contexto de formato de bloque (BFC).
Nota 2: Podemos usar las palabras clave tamaño, diseño, estilo y pintura juntas y en cualquier orden.
Ahora, comprendamos la contención flotante y cómo es útil con los siguientes ejemplos.
Ejemplo 1: El siguiente ejemplo de código demuestra nuestro diseño con dos cuadros flotantes dentro de dos contenedores diferentes sin el uso de nuestra propiedad de contenido .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid red;
width: 500px;
margin: 10px;
}
.box {
width: 100px;
height: 100px;
border: 4px solid black;
float: left;
background: green;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
This example shows our layout
without contain property.
</h3>
<div class="container">
<p> Container1 with a floating box1 </p>
<div class="box">Box1</div>
</div>
<div class="container">
<p> Container2 with a floating box2 </p>
<div class="box">Box2</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo muestra nuestro diseño con contenedores definidos ‘contain: content’.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
border: 2px solid red;
width: 500px;
margin: 10px;
contain: content;
}
.box {
width: 100px;
height: 100px;
border: 4px solid black;
float: left;
background: green;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
This example shows our layout with
'contain:content' defined containers.
</h3>
<div class="container">
<p> Container1 with a floating box1 </p>
<div class="box">Box1</div>
</div>
<div class="container">
<p> Container2 with a floating box2 </p>
<div class="box">Box2</div>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA