float과 overflow 이해하기

---

📚 What is TIL?

float이 무엇일까?

• 자신을 포함하고 있는 컨테이너의 좌 우측에 배치 되게 한다
• 이미지 또는 기타 요소를 시각적으로 보여주기 위한 방식이다
• 요소는 문서의 흐름에서 제외(===부유)되게 된다
• 다른 요소들까지 똑같은 속성이 전달되어 float을 적용한 요소 이후에 오는
  다른 요소들까지 둘러싼 형태가 되거나 부유된 영역 아래로 들어간다

⚠️ 부모는 float된 자식의 너비 높이를 고려 하지 않는다
⚠️ 따라서 부모요소가 높이 값을 잃어 float된 자식을 품지 못하는 문제가 발생한다
⚠️ 뿐만아니라 주변요소에 영향을 미칠 수 있다
⚠️ float 속성을 주면 대부분이 block 요소로 변경된다

🔎 overflow: hidden 을 통해 이를 해결할 수 있다

💡 그렇다면, overflow 는 무엇인가?

overflow

• 일정 영역을 벗어나는 부분을 보이지 않게 하는 스타일 속성이다

• 레이아웃을 구성할 때 float 속성과 자주 함께 사용된다

  🔎 새로운 문서를 시작하는 일이다

  💡 그렇다면, 새로운 문서란 무엇인가?

  • 이 개념을 알기 위해서는 Block formatting context 라는 용어를 알고 넘어가야한다

bfc(Block formatting context)

• 블록 서식 문맥이라고 한다
• html태그는 최상위 태그에 속하기 때문에 자기 자식들의 높이, 너비, 위치 등을 알아야한다
  때문에 하나의 페이지에서 독립적인 영역으로 나타나있는데,
  이것을 Block formatting context 라고 말할 수 있다

• 위에서 말했듯이 새로운 문서를 시작한다는 것은,
  body영역안에 overflow속성이 지정된 요소가 새로운 Block formatting context가 된다는 것이다

  💡 Block formatting context가 되면 무슨 일이?

  • 독립적인 영역이 만들어지기 때문에 float된 요소와 전혀 영향을 주고받지않을 수 있다
  • 자식들의 높이 만큼 새로운 독립된 영역을 갖게 된다 === 높이를 되찾아 다시 요소들을 품을 수 있다

  💡 그렇다면, 무엇에 의해 생성되는가?

  • 블록 서식 문맥은 다음 중 하나에 의해 생성된다
    • 루트(html) 또는 이를 포함하는 요소
    • 절대위치로 지정된 요소
    • 인라인블록
    • flex box
    • overflow가 visible이 아닌 요소

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

✔️ 부모는 float된 자식의 너비 높이를 고려 하지 않는다
✔️ 인라인 요소 내부의 float가 되도 높이가 없어지지않는 것을 알 수 있다
✔️ overflow:hidden 은 보이는 것을 숨겨주는 것말고도 html 안에 새로운 bfc를 생성하는 것을 확인 할 수 있다

margin 병합현상의 해결법

• 마진병합은 의도된 현상이다
  • CSS 의 목적은 안정적인 레이아웃을 쉽게 만들기 위함이니까 그렇게 설계한 것이다
• 부모와 자식간의 margin 병합현상도 일어난다
  • 자식의 margin이 부모의 margin 처럼 보여지는 현상이다

🔎 이 또한 overflow: hidden 으로 해결이 가능하다

• 위에 언급했듯 부모에게 overflow: hidden이 적용이 되면 부모에게 새로운 bfc가 만들어진다

• 즉, body의 성질(bfc)을 가지게 되는 것이다

  💡 body안의 요소에게 margin을 아무리 줘도 body 밖으로 나가지 않는 현상을 생각해보면 이해가 될 것이다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

✔️ 자식에게도 새로운 bfc 생성해서 마진병합을 해결할 수 있다
✔️ 마진병합은 인접해있는 상하단 면만 겹친다, 좌우가 아니다
✔️ 부모와 자식 모두가 bfc를 생성하여 각각의 레이아웃 영역이 생성된 것이다

float을 해제하는 또 다른 방법

clear: both

• 따로 float 속성을 사용하지 않고 싶을 때 사용한다
• float 요소 이후 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려갈 수 있다

::after

• float된 요소의 부모태그에 가상요소를 만들고 해당 요소에 clear:both를 지정해준다
• 부모의 태그 뒤에 내용이 텅텅 빈 content: ““ 블럭 display: block 을 만들고 clear: both로 clearfix 시킬 수 있다

See the Pen Untitled by tjqehd23 (@tjqehd23) on CodePen.

✔️ p 요소만 float 속성이 해제되어 부유한 박스 아래로 내려가는 것을 알 수 있다

---

✨ Today is …

베트남에서 힐링하고 후폭풍이..

나 빼고 다들 float에 대해 배우고 있을 때 나는 반미를 먹고있었다.. ㅎ
복귀해서 공부를 하다보니 overflow: hidden으로
왜 요소간의 위치에 변동을 줄 수 있는지 이해가 안가서…
종찬님의 overflow 강의를 보며 개념을 정리할 수 있었다
덕분에 이해하는데 정말 도움이 됐다 (종찬님의 채널 홍보 덕에..👍)

bfc에 대해 아직 헷갈리는 것도 있고 개념이 잘 잡혔다고 말하기엔
아직 애매한 부분이 많지만 ㅜ 추후에 bfc에 대해 더 공부해야겠다 💡