Erstellt overflow:hide in CSS einen neuen Formatierungskontext auf Blockebene?-CSS-Tutorial-php.cn

Erstellt overflow:hide in CSS einen neuen Formatierungskontext auf Blockebene?

WBOY

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

nach vorne

901 Leute haben es durchsucht

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

Ein Blockformatierungskontext (BFC) ist der Teil des Webseitenlayouts in CSS, in dem Elemente positioniert werden und miteinander interagieren. Kurz gesagt, es ist wie ein Container, der eine Reihe von Regeln dafür definiert, wie sich Elemente innerhalb des Containers verhalten sollen.

In diesem Artikel sehen wir „Erstellt overflow:hidden einen neuen Blockformatierungskontext (BFC) in CSS

“.

Die Antwort lautet „Ja“, denn in CSS kann das Attribut „overflow:hidden“ einen neuen Formatierungskontext auf Blockebene (BFC) erstellen. Wenn der Überlaufwert eines HTML-Elements nicht sichtbar ist (Standardwert), wird die Erstellung eines neuen BFC ausgelöst. BFC verhindert, dass Ränder zusammenfallen, hilft bei der Aufrechterhaltung der korrekten Positionierung, verhindert versehentliche Überlappungen und hilft dem Leser, den Kontrast zwischen zwei verschiedenen Elementen wahrzunehmen.

Schauen wir uns nun das folgende Beispiel an, um die Auswirkungen von overflow:hidden auf die BFC-Erstellung zu verstehen −

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Im folgenden Beispiel formatieren wir den „Container“, ohne die CSS-Eigenschaft overflow:hidden zu verwenden.

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

Nach dem Login kopieren

Anhand der Ausgabe können wir erkennen, dass der Text im Container die Grenze überschreitet. Daher kann es über den Container hinausragen und andere Elemente auf der Webseite überlappen, wodurch das Layout beschädigt wird.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Im folgenden Beispiel verwenden wir die CSS-Eigenschaft Overflow:hidden, um den „Container“ zu formatieren –

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

Nach dem Login kopieren

Durch Hinzufügen des Attributs overflow:hidden zum Container wird ein neuer BFC erstellt. Wenn der Text daher die Höhe des Containers überschreitet, wird er abgeschnitten und nicht mehr sichtbar. Der übergelaufene Text bleibt jedoch im Container.

Das obige ist der detaillierte Inhalt vonErstellt overflow:hide in CSS einen neuen Formatierungskontext auf Blockebene?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!