CSS overflow

visible : 기본값이며 넘친 부분을 자르지 않고 그대로 보여줌
hidden : 넘친 부분을 잘라내고 보이지 않도록 함
scroll : 넘친 부분을 잘라내고, 스크롤바를 이용해 볼 수 있도록 함(넘침 유무와 상관없이 스크롤 생김)
auto : 넘친 부분이 있는 경우만 잘라내고 스크롤바를 이용해 볼 수 있도록 함

.parent{
    width: 300px;
    height: 250px;
    border: 4px solid;
}
.parent .child{
    width: 100px;
    height: 100px;
    background: tomato;
    border: 4px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

위와 같이 코드를 짤 경우

오버플로우를 넣어주지 않은 경우(기본값인 visible)

오버플로우가 hidden인 경우

오버플로우가 scroll인 경우

오버플로우가 auto인 경우

scroll의 경우는, 가로는 넘치지도 않았는데 horizontal scroll이 생기는 것을 볼 수 있음

그러나 auto는 vertical scroll만 생김
scroll은 넘치든 안 넘치든 생성해버림(vertical도 마찬가지)

float와 overflow의 조합

float를 쓰게 되면 부모 요소가 높이를 명시하지 않았다면 높이가 없어지게 됨
float가 들어있는 자식 요소는 부유물이 되어 공중에 떠있는 것처럼 되기 때문

해당화면을 만들기 위해서는 아이콘을 감싸고 있는 부모 요소에 배경색을 넣어줘야 하고,
또 높이도 자식 요소에 맞게 정확히 맞춰줘야 함

보통 이렇게 자식들이 나열될때는 float를 사용하게 되는데

        a {
            float: left;
            width: 20%;
            padding: 12px 0;
            text-align: center;
            font-size: 36px;
            color: #f2f2f2;
            transition: background-color ease 0.3s;
        }

이런식으로 정의하고, 부모를

        .icon-bar {
            width: 100%;
            background-color: #555;
        }

다음과 같이 정의하면 결과는 다음과 같음

보다시피 width: 100%이고, height: auto;로 설정되어있는데, (코드에 적진 않았지만, 자식 요소가 들어가면 자동으로 auto가 됨 이게 auto가 안된다면, div태그 안에 다른 자식 요소들을 넣게 될 경우 항상 부모인 div태그에 높이를 명시해줘야만 하는데 실제론 그렇지 않음) 자식 요소인 a태그가 float이기 때문에 공중에 뜨게 되면서 height: 0으로 설정되게 됨

이럴때 overflow: auto를 해주게 되면, 자식요소의 높이에 맞게 height: auto로 설정됨

        .icon-bar {
            width: 100%;
            overflow: auto;
            background-color: #555;
        }

그럼 아까처럼 결과가 나오게 됨