CSS
Контексты форматирования блоков

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

замечания

[Контекст форматирования блоков является частью визуального CSS-рендеринга веб-страницы. Это область, в которой происходит компоновка блочных ящиков и в которых поплавки взаимодействуют друг с другом.] [1]

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

Использование свойства переполнения со значением, отличным от видимого

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/

Использование свойства переполнения со значением, отличным от видимого (по умолчанию), создаст новый контекст форматирования блока. Это технически необходимо - если поплавок пересекается с элементом прокрутки, он принудительно перевязывает содержимое.

Этот пример, который показывает, как несколько абзацев будет взаимодействовать с плавающим изображением, похоже на этот пример , на 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

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow