CSS
Contextos de formato de bloque

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


Observaciones

[Un contexto de formato de bloque es parte de una representación visual de CSS de una página web. Es la región en la que se produce el diseño de las cajas de bloques y en la que los flotadores interactúan entre sí.] [1]

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

Usando la propiedad de desbordamiento con un valor diferente a visible

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

introduzca la descripción de la imagen aquí

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

El uso de la propiedad de desbordamiento con un valor diferente a visible (su valor predeterminado) creará un nuevo contexto de formato de bloque. Esto es técnicamente necesario: si un flotador se intersecaba con el elemento de desplazamiento, volvería a envolver el contenido a la fuerza.

Este ejemplo que muestra cómo interactúan varios párrafos con una imagen flotada es similar a este ejemplo , en 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
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow