CSS
Block-Formatierungskontexte

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Suche…


Bemerkungen

[Ein Blockformatierungskontext ist Teil eines visuellen CSS-Rendering einer Webseite. Dies ist der Bereich, in dem das Layout von Blockboxen auftritt und in dem Floats miteinander interagieren.] [1]

[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context MDN

Verwenden der Überlaufeigenschaft mit einem anderen Wert als sichtbar

img{
  float:left;
  width:100px;
  margin:0 10px;
}
.div1{
  background:#f1f1f1;
  /* does not create block formatting context */
}
.div2{
  background:#f1f1f1;
  overflow:hidden;
  /* creates block formatting context */
}

Geben Sie hier die Bildbeschreibung ein

https://jsfiddle.net/MadalinaTn/qkwwmu6m/2/

Wenn Sie die Überlaufeigenschaft mit einem anderen Wert als sichtbar (Standardwert) verwenden, wird ein neuer Blockformatierungskontext erstellt. Dies ist technisch notwendig - wenn ein Float mit dem Bildlaufelement geschnitten wird, wird der Inhalt zwangsweise neu geschrieben.

Dieses Beispiel, das zeigt, wie mehrere Absätze mit einem schwebenden Bild interagieren, ähnelt diesem Beispiel auf css-tricks.com.

2 : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow MDN



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow