What is float containment in CSS?
What are floats in CSS?
Before beginning this tutorial, let’s first understand what floats are. Therefore, floats are a technique used in CSS to control the layout of web page elements.
Whenever we set the ‘float’ property on any HTML element, it is automatically removed from the original document flow of the web page, but it still remains in the viewport. As a result, developers may face issues such as the parent div element not expanding according to the size of the child div element. Let’s understand this with the following example.
Example
In the example below, we have a “parent” div element that contains text and a “child” div element. Here, we haven’t set a width for the parent div element.
In addition, we have The div element is set to fixed size and the ‘float: left’ CSS property is added to make it float on the left. In the output, the user can observe that the parent div is not expanding according to the height of the child div element because it is floating.
<html>
<head>
<style>
.parent {
border: 2px dotted blue;
width: 300px;
margin: 5px;
}
.child {
width: 50px;
height: 50px;
float: left;
border: 4px solid green;
background: yellow;
}
</style>
</head>
<body> <h2>Use the <i>float CSS property</i> to float elements</h2>
<div class = "parent">
<p> This is random text.</p>
<div class = "child"> </div>
</div>
<div class="parent">
<p> This is random text.</p>
<div class = "child"> </div>
</div>
</body>
</html>
To solve the above problem, we can use the following technique.
Using the CSS Contain Property
The ‘Contain’ CSS property removes a specific element and its descendant elements from the document flow, making them independent. When we set the ‘float’ CSS property on any HTML element, it is removed from the document. Therefore, we can also use the ‘contain’ CSS property to remove the parent element from the document flow to fix the layout of the floated element.
Syntax
Users should use the ‘Contain’ CSS property as follows.
parent {
contain: content
}
In the above syntax, the parent selector selects the parent element of the specific element to which we set the ‘float’ CSS property.
Example
In the following example, we use the same code as in the first example. Here, we added the “contain: content” CSS property to the “parent” div element.
In the output, users can observe that the child div no longer overflows but is perfectly set within the parent div element.
<html>
<head>
<style>
.parent {
border: 2px dotted pink;
width: 300px;
margin: 5px;
contain: content;
}
.child {
width: 50px;
height: 50px;
float: left;
border: 4px solid blue;
background: red;
}
</style>
</head>
<body>
<h2>Use the <i>contain CSS property</i> when setting floated elements with the <i>float CSS property</i> </h2>
<div class = "parent">
<p> Welcome to TutorialsPoint! . </p>
<div class = "child"> </div>
</div>
<div class = "parent">
<p> Hi! How are you? </p>
<div class = "child"> </div>
</div>
</body>
</html>
Using the CSS Overflow Property
The CSS “overflow” property controls the overflow of a specific HTML element. When we set the value of the “overflow” property to “auto,” it makes the HTML element scrollable when the element’s content begins to overflow.
Syntax
Users can use the “overflow: auto” CSS property as a float containment by following the following syntax.
selector {
overflow: auto;
}
Example
In the example below, we create a “card” div that contains “text” and “image” div elements. We set “float: left” for the image div element and “overflow: auto” for the card element.
In the output, users can observe that the image fits perfectly within the card element. If we remove the “overflow” attribute, it will overflow the div element.
<html>
<head>
<style>
.card {
border: 2px dotted pink;
width: 300px;
margin: 5px;
overflow: auto;
}
.image { float: left;}
</style>
</head>
<body>
<h2>When using the <i>float CSS property</i> to float an element, use the <i>overflow: auto CSS property</i> </h2>
<div class = "card">
<div class = "text"> I love nature! </div>
<div class = "image"> <img src = "https://encrypted-tbn0.gstatic.com/https://coder-cafe.com/wp-content/uploads/2025/09/images?q=tbn:ANd9GcT58C2HqvIjZnL-UlE0TxpLPf_l6O-h34EhvPABAEk8&s" alt = "image"> </div>
</div>
</script>
</body>
</html>
Using the Grid Layout Module
We can use the ‘display: grid’ CSS property in CSS to create a grid layout on a web page. Here, we set the ‘float’ CSS property for some HTML content. Then, we can create two columns using the ‘display: grid’ and ‘grid-template-columns: 1fr 1fr’ CSS properties.
Basically, it sets float elements in a grid layout, helping developers fix web page layouts.
Syntax
Users can use “display: grid” to set float elements using the following syntax.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
In the above syntax, users can create multiple columns by changing the value of the “grid-template-columns” CSS property.
Example
In the example below, the ‘container’ div element contains the ‘float-left’ and ‘float-right’ div elements. We set the ‘float’ property value on the div elements based on their class names.
We used the ‘display: grid’ CSS property on the ‘container’ div element. In the output, you can see two div elements set up within the container: one on the left and one on the right.
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
display: grid;
border: 3px solid green;
grid-template-columns: 1fr 1fr;
font-size: 2rem;
}
.float-left {float: left;}
.float-right {float: right;}
</style>
</head>
<body>
<h2>Floating Elements with the 'display: grid' CSS Property</h2>
<div class = "container">
<div class = "float-left"> This is the left column </div>
<div class = "float-right"> This is the right column </div>
</div>
</body>
</html>
In this tutorial, you learned various techniques for containing floated elements. In the first technique, we used the ‘contain’ CSS property. In the second, we used the ‘overflow’ property, and in the third, we used the ‘display: grid’ CSS property.