CSS
컨텍스트 서식 지정 차단

비고

오버 플로우 속성을 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 */
}

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

overflow 속성을 visible과 다른 값 (기본값)으로 사용하면 새로운 블록 서식 지정 컨텍스트가 만들어집니다. 이것은 기술적으로 필수적입니다. 스크롤 요소와 플로트가 교차하면 강제로 내용을 다시 래핑합니다.

여러 단락이 떠 다니는 이미지와 상호 작용하는 방법을 보여주는 이 예제 는 css-tricks.com 의이 예제 와 유사합니다.

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