在CSS中，overflow: hidden會建立一個新的區塊級格式化上下文嗎？-css教學-PHP中文網

Example

範例

首頁

web前端

css教學

在CSS中，overflow: hidden會建立一個新的區塊級格式化上下文嗎？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 10, 2023 pm 06:57 PM

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

區塊格式上下文 (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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn