[CSS] Content overflow

overflow

box에 내용이 너무 많을 때 발생 -> box 안에 안 들어감

CSS는 데이터 손실을 피하려고 한다.

height를 지정하여 블록 크기 제한 시에 content overflow 발생 시에 content가 넘쳐서 box 밖으로 튀어나간다.

inline 크기로 제한된 box에 content overflow가 발생해도 content가 box 밖으로 튀어나온다.

CSS는 overflow 시에 content를 손실시키지 않고 그냥 밖으로 튀어나오게 한다.

overflow 속성

overflow의 기본값: visible
-> overflow가 발생하면 기본적으로 content를 볼 수 있다.

overflow 발생 시에 content를 자르려면 overflow: hidden을 설정할 수 있다.
-> overflow를 숨길 수 있다.

overflow: scroll -> overflow 발생 시에 scroll 막대 표시

overflow-y: scroll -> y축에서만 scroll하도록 할 수 있다.

overflow-x: scroll 도 가능

overflow: auto -> overflow시에만 scroll바가 나타난다.

BFC - Block Formatting Context

scroll 또는 auto와 같은 overflow 값을 사용할 때 BFC를 생성한다.

overflow 값을 변경한 box의 content가 자체의 Mini layout이 된다.