首页 >web前端 >css教程 >在CSS中，overflow: hidden会创建一个新的块级格式化上下文吗？

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

WBOY转载: 2023-09-10 18:57:02942浏览

块格式上下文 (BFC) 是 CSS 中网页布局的一部分，元素在其中定位并相互交互。简而言之，它就像一个容器，定义了一组元素在容器内应如何行为的规则。

在本文中，我们将看到“overflow:hidden 是否在 CSS 中创建新的块格式化上下文 (BFC)？”

答案是肯定的，因为在CSS中，overflow:hidden属性可以创建一个新的块级格式化上下文（BFC）。当一个HTML元素的overflow值不是visible（默认值）时，它会触发创建一个新的BFC。BFC可以防止边距折叠，有助于保持正确的定位，防止意外重叠，并帮助读者感知两个不同元素之间的对比。

现在，让我们看一下以下示例，以了解overflow: hidden对BFC创建的影响−

Example

的中文翻译为：

示例

在下面的示例中，我们将“container”样式化，而不使用CSS的overflow:hidden属性。

<!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>

从输出结果中我们可以看到，容器内的文本超出了边界。因此，它可能会延伸到容器外部并与网页上的其他元素重叠，从而破坏布局。

Example

的中文翻译为：

示例

在下面的示例中，我们使用 CSS Overflow:hidden 属性来设计“容器”的样式 -

<!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>

通过向容器添加overflow:hidden属性，就创建了一个新的BFC。因此，如果文本超过容器的高度将被剪切并隐藏在视图中。但溢出的文本将保留在容器内。

以上是在CSS中，overflow: hidden会创建一个新的块级格式化上下文吗？的详细内容。更多信息请关注PHP中文网其他相关文章！

css html overflow

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：CSS3属性如何实现网页中的图片布局与排列？下一篇：使用 CSS 将轮廓样式设置为凹槽

查看更多