Day9. overflow: hidden;이 float의 문제점을 해결할 때 쓰이는 이유

(이하 빔캠프 종찬님 강의를 보며 정리한 내용입니다.)

컨테이너 box(부모요소)의 높이는 자식 요소의 높이 만큼 자동설정(= height: auto;)

부모의 높이를 제한해줘야 할때, 자식 요소의 높이가 제한 된 부모 높이 보다 크면 넘쳐흐르는 상황이 발생한다.

이런 상황이 발생한다..

<div class="box">
   <img class="left" src="./lemon.png" alt="반 잘린 레몬 단면">
</div>

body {
  background-color: #ddd;
}

.box {
  height: 50px;
  background-color: #fff;
}

→ 이런 상황을 해결하기 위해 많이 쓰는 속성이 overflow: hidden;이다. (overflow의 기본값은 visible이다.)

overflow: hidden; 속성을 부모요소에(box 클래스) 적용해주면 부모 요소 높이 만큼 잘라버린다.

넘쳐나는 것을 잘라버림✂️ 

때로 scroll값을 적용해서 스크롤하면 자식요소를 볼 수 있도록 해줄 수도 있다. (밑의 예시처럼)

→ 이것이 overflow속성의 원래 용도라고 할 수 있다. (넘쳐흐르는 요소 자르기, 넘쳐흐르는 요소 스크롤해서 보이기)

overflow속성은 float의 문제점을 해결해주기 위해서도 자주 사용된다.(float용법은 따로 배우기~!)

<div class="box">
   <img class="left" src="./lemon.png" alt="반 잘린 레몬 단면">
<p> ~~~~ </p>
</div>

지금 img태그 밑에 문단을 추가 해줬다. p는 block요소이기 때문에 이미지태그 옆에 오지 않고 그밑에 자신의 영역을 모두 차지하게 된다. 이 경우 이미지 옆 공간이 낭비된다고 볼 수 있는데 이 현상을 해결하기 위해 float를 써주는 것이다.

이때 img태그에 float: left;속성을 먹이게되면, img가 float되면서(위로뜨면서) 왼쪽으로 정렬되고 나머지 영역을 p태그가 차지하게 된다.

이렇게 레이아웃이 바뀌는 것을 확인 할 수 있다.

float속성이 적용된 요소의 특징을 잠깐 언급하자면, float된 요소는 집을 나가버린다. 자신이 속해있는 부모요소안에 자식요소로 존재하는 것이 아니라 독립적인 존재로 바뀌게 된다. 즉, 위 이미지에서 p태그 문단의 시작이 글자의 시작부분이 아니라는 것이다. 이부분은 p태그에 border를 줘보면 쉽게 알 수 있다.

block요소는 float를 먹은 요소를 없는 취급, 무시하고 float요소의 자리를 비집고 들어가지만, 텍스트나 이미지처럼 inline요소는 float된 요소의 존재를 알고 저렇게 영향을 받는 것이다.

그래서 block요소인 p태그는 레몬의 존재를 무시하고 영역을 저렇게 잡지만 p태그 안의 텍스트는 float된 레몬 요소의 존재를 알고 영향을 받아 옆으로 밀려난 것이다. (이런 배치가 원래 float속성의 본질, 목적이다.)

문제는 p태그의 텍스트가 충분하지 않을 때 일어난다.

이미지가 다시 비정상적으로 삐져나온 것 처럼 보인다. 사실 이건 삐져나왔다기 보다 레이아웃이 어그러졌다고 보는게 맞는 것 같은게,, float된 요소는 부모에 속하지 않고 독립적인 존재이기 때문에 float를 먹은 레몬이 둥둥떠있고 그 빈자리에 p태그 영역이 차지하게되었고, 텍스트가 레몬 height만큼 충분하지 않기 때문에 위 이미지와 달리 이상해 보이는 것이다. 사실 위 이미지도 레이아웃이 어그러진건 마찬가지임,,(나의 뇌피셜이었다.)

부모 요소는 float된 요소의 height를 고려하지 않기때문에(집을 나갔기 때문에,,) 위 이미지와 같은 결과가 나오는 것이다.

이번에는 이미지를 두개를 넣어서 각 왼쪽 오른쪽으로 정렬해보겠다.

<div class="box">
        <img class="left" src="./lemon.png" alt="반 잘린 레몬 단면">
        <img class="right" src="./kiwi.png" alt="반 잘린 키위 단면">
</div>

body {
  background-color: #ddd;
}

.box {
  background-color: #fff;
}

그리고 각 img left, right 클래스에 float left, right를 줘보겠다.

여기서 float의 성질을 다시 확인해볼 수 있다. 두 요소를 float시켰더니 지금 두 요소를 감싸는 box클래스 div태그의 하얀 배경 컬러가 사라졌다. 왜냐면, 레몬이랑 키위가 float 돼서 집을 나갔기때문에 지금 box클래스 div태그는 자식요소인 레몬과 키위의 height를 고려하지 않고 이 둘 외에 자식이 없기 때문에 지금 height가 0인 상태이다.

이런 상황,, 이 레이아웃은 비정상적이다. float를 이용해 배치를 하려고 할때! 이런 부작용이 생기는 것이다.

이게 왜 잘못되었냐,, 만약 box클래스를 가진 전체 div 요소 밑에 글자를 하나 넣으면, 생각대로라면 레몬, 키위 밑에 나와야할 것 같은데,,

실제로는 이렇게 나온다는 것이다. 레몬과 키위는 float, 붕 떠있는 상태이기 때문에 다음 요소인 wow텍스트가 바로 저렇게 나와버리는 것,,

이 문제는 box클래스를 가진 전체 div요소에 overflow: hidden; 을 주면 해결할 수 있다.

여기서 문제!!!! overflow: hidden;은 대체 뭐길래 이걸 해결할 수 있는 것인가 ← 진짜 문제 등장했다.

부모요소는 float된 자식 요소의 height를 고려하지 않는다고 했지만, 최상위 요소인 루트root 즉 html요소는 float된 자식요소를 인지한다. 루트root 요소인 html은 별다른 처리를 하지 않아도 float의 문제가 일어나지 않는 block formatting context이기 때문이다.(bfc에 대한 설명은 조금 밑에!)

위와 같은 상황에서 창 크기를 줄여보면 html요소가 float된 요소의 높이의 끝을 인지한다.

이러한 특성을 쏙 빼서 부모요소에 적용시켜준 것이 바로 overflow속성이다~
overflow속성을 주면 그 속성을 먹은 요소는 기존 body안에서 또다른 작은 body가 된다.~

box 클래스 전체 div에 height와 overflow: scroll;을 주었다.

그래서 box 클래스 전체 div태그가 작은 block formatting context가 된 것이다. 부모 height값 보다 자식요소의 height값이 더 크니까 자연스럽게 스크롤바가 생기는 것, bfc의 역할과 같다.

body는 Block Formatting Context라는 성격을 가지고 있는데 이것은 block요소가 그려질 수 있는 환경적인 부분을 담당하는 내부 로직이다. (종찬님 어항비유 짱이네,, 강의참고!!)

즉 그렇게 된 box클래스 div 영역은 독립적이고 기존 body와는 별도의 html페이지라고 생각하면 될 것 같다.

새로운 body영역이 본래 body안에서 시작된다는 느낌으로 이해를 해볼 수 있겠다.

✨overflow가 부여된 요소는 독립적인 문서가 시작된다. 이를 BFC Block Formatting Context라고 부른다.

즉 새로운 BFC가 시작된다. 우리가 원래 알고있던 BFC영역은 body영역이라고 볼 수 있다.

그 body요소 안에 overflow속성이 지정된 요소는 새로운 BFC가 된다.

즉, float된 요소까지도 온전히 포함하고 있는 새로운 block formatting context를 생성해준다.

overflow의 기본값인 visible이 아니면 새로운 bfc가 생성되는 것이 원칙이다.

드디어 이 overflow에 대해 이해를 할 수 있게 되었다... float와 같이 쓸 때 overflow: hidden;의 효과와는 전혀 상관없는 일이 일어나니까 사용하면서도 이해가 잘 안갔는데,, 이젠 잘 이해하고 사용할 수 있겠다.

어차피 flex배우면 가로배치하자고 float나 position을 내 의지로 쓰는 일은 절대 없겠지만,,

강의도 두 번 돌려보고 실습도 두 번 해보고,, 긴 시간이었지만 이해했으면 됐다,,,