CSS
Blocca i contesti di formattazione

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


Osservazioni

[Un contesto di formattazione dei blocchi fa parte di un rendering CSS visuale di una pagina Web. È la regione in cui si verifica il layout delle caselle di blocco e in cui i float interagiscono tra loro.] [1]

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

Utilizzando la proprietà di overflow con un valore diverso da visibile

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

inserisci la descrizione dell'immagine qui

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

L'utilizzo della proprietà di overflow con un valore diverso da visible (predefinito) creerà un nuovo contesto di formattazione dei blocchi. Ciò è tecnicamente necessario: se un oggetto mobile si interseca con l'elemento di scorrimento, riavvolge forzatamente il contenuto.

Questo esempio che mostra come un certo numero di paragrafi interagirà con un'immagine fluttuante è simile a questo esempio , su 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
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow