CSS => Blokopmaak Contexten

Opmerkingen

[Een blokopmaakcontext is een onderdeel van een visuele CSS-weergave van een webpagina. Het is het gebied waarin de lay-out van block boxes plaatsvindt en waarin floats met elkaar communiceren.] [1]

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

De overloopeigenschap gebruiken met een andere waarde dan zichtbaar

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 */
}

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

Als u de eigenschap overloop gebruikt met een andere waarde dan zichtbaar (de standaardwaarde), wordt een nieuwe context voor blokopmaak gecreëerd. Dit is technisch noodzakelijk - als een vlotter wordt doorsneden met het schuifelement, wordt de inhoud gedwongen opnieuw ingepakt.

Dit voorbeeld dat laat zien hoe een aantal alinea's zullen samenwerken met een zwevende afbeelding is vergelijkbaar met dit voorbeeld op 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

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
Blokopmaak Contexten

Zoeken…

Opmerkingen

De overloopeigenschap gebruiken met een andere waarde dan zichtbaar