In CSS, does overflow: hidden create a new block-level formatting context?-CSS Tutorial-php.cn

In CSS, does overflow: hidden create a new block-level formatting context?

WBOY

Release： 2023-09-10 18:57:02

forward

945 people have browsed it

在CSS中，overflow: hidden会创建一个新的块级格式化上下文吗？

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 of

Example

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>

Copy after login

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 of

Example

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>

Copy after login

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!