Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Does overflow: hidden create a new block formatting context in CSS?
The block formatting context (BFC) is a part of the web page layout in CSS where elements are positioned and interact with each other. In simple words, it is like a container that defines a set of rules for how elements should behave inside the container.
In this article, we are going to see "Does overflow: hidden create a new block formatting context (BFC) in CSS?"
The answer is yes because in CSS, the overflow: hidden property can create a new block formatting context (BFC). When an HTML element has an overflow value other than visible (the default value), it triggers the creation of a new BFC. The BFC prevents collapsing margins, helps to maintain proper positioning, prevents unexpected overlaps, and helps readers perceive the contrast between two different elements.
Syntax
selector {
overflow: hidden;
}
Example 1: Without overflow: hidden
In the following example, we are styling the "container" without the CSS overflow: hidden property
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
A light salmon colored container with a black border appears. The text inside overflows beyond the container's height boundary, extending below the container and potentially overlapping with other elements.
Example 2: With overflow: hidden
In the following example, we are styling the "container" with the CSS overflow: hidden property
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 70px;
width: 300px;
border: 2px solid;
overflow: hidden;
background-color: lightsalmon;
}
</style>
</head>
<body>
<h1 style="color: seagreen;">Tutorialspoint</h1>
<div class="container">
<p>
Tutorialspoint.com is a dedicated website to
provide quality online education in the domains
of Computer Science, Information Technology,
Programming Languages, and Other Engineering
as well as Management subjects.
</p>
</div>
</body>
</html>
A light salmon colored container with a black border appears. The text that exceeds the container's height is clipped and hidden from view, maintaining the container's boundaries and preventing overflow.
Key Benefits of BFC with overflow: hidden
- Prevents margin collapse: Creates an independent formatting context
- Contains floated elements: Floated children don't escape the container
- Clips overflow content: Maintains clean boundaries
- Establishes positioning context: Affects layout calculations
Conclusion
The overflow: hidden property creates a new block formatting context, which helps contain content within boundaries and prevents layout disruptions. This makes it a valuable tool for maintaining clean, predictable layouts in CSS.
245 Views
