Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Now, let us look at the following examples to understand the impact of overflow: hidden on the creation of a BFC −
Example
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>
As we can see from the output, the text inside the container is overflowing beyond the boundaries. As a result, it may extend outside the container and overlap with other elements on the webpage and it may disrupt the layout.
Example
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>
By adding the overflow:hidden property to the container, a new BFC is created. As a result, If the text exceeds the container’s height will be clipped and hidden from view. But the overflowing text will remain within the container.
67 Views
