Home > Article > Web Front-end > In CSS, does overflow: hidden create a new block-level formatting context?
In CSS, does overflow: hidden create a new block-level formatting context?
- WBOYforward
- 2023-09-10 18:57:02899browse
A block formatting context (BFC) is the part of a web page layout in CSS where elements are positioned and interact with each other. In short, it is like a container that defines a set of rules for how elements should behave within the container.
In this article, we will see "Does overflow:hidden create a new block formatting context (BFC) in CSS?"
The answer is yes, because in CSS, the overflow:hidden attribute can create a new block-level formatting context (BFC). When an HTML element's overflow value is not visible (the default value), it triggers the creation of a new BFC. BFC prevents margins from collapsing, helps maintain correct positioning, prevents accidental overlap, and helps readers perceive contrast between two different elements.
Now, let us look at the following example to understand the impact of overflow: hidden on BFC creation −
The Chinese translation ofExample
is:Example
In the example below, we style the "container" without using 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>
We can see from the output that the text in the container exceeds the boundary. Therefore, it may extend outside the container and overlap other elements on the web page, breaking the layout.
The Chinese translation ofExample
is:Example
In the following example, we use the CSS Overflow:hidden property to style the "container" -
<!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 attribute to the container, a new BFC is created. Therefore, if the text exceeds the height of the container it will be clipped and hidden from view. But the overflowed text will remain within the container.
The above is the detailed content of In CSS, does overflow: hidden create a new block-level formatting context?. For more information, please follow other related articles on the PHP Chinese website!