In this article, we will see what is float containment in CSS.
The CSS Float Containment is used to improve the performance of web pages by isolating the subpart of the page from the rest of the page. Once the browsers know that a certain part of code is independent then its rendering can be optimized resulting in improved performance.
CSS Float containment defines the contain CSS property.
The CSS contain property allows to indicate that element and its descendants are considered independent of the document tree as much as possible. This has clear efficiency advantages because it enables the browser to recalculate layout, style, color, size, or any combination of them for a small portion of the DOM rather than the full page. The typical use of this property is for an element that contains content of some type.
Syntax:
element {
contain: none | strict | content |
[ size || layout || style || paint ];
}Keyword Values:
- none: No containment was applied to the element.
- size: Affects the size calculation of the page as the element can be sized without the need to examine its descendants’ sizes.
- layout: It helps in how the element relates to other elements on the page by making sure that nothing outside the element may affect its internal layout and vice versa.
- style: Indicates that properties with effects on more than just an element and its descendants do not escape the containing element.
- paint: It helps in how an element is painted to screen as the element’s descendants do not appear outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these, too, must be offscreen because they are completely contained by that box. If a descendant exceeds the bounds of the containing element, it will be clipped to the containing element’s border-box.
- strict: It is the combination of the layout, paint, and size containment values.
- content: It is the combination of the layout and paints containment values.
Note 1: The contain property with values paint, strict or content will create a new block formatting context (BFC).
Note 2: We can use the keywords size, layout, style, and paint altogether and in any order.
Now, let us understand float containment and how it is helpful with the following examples.
Example 1: The following code example demonstrates our layout with two floating boxes inside of two different containers without the use of our contain property.
<!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>
|
Output:
Example 2: This example shows our layout with ‘contain: content’ defined containers.
<!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>
|
Output: