float로 배치된 부모요소의 높이 찾아주기 cover

float로 배치된 부모요소의 높이 찾아주기

float로 배치된 부모요소의 높이 찾아주는 방법은 여러가지 있지만 가장 선호하는 방법은 overflow: hidden입니다.

float된 요소의 부모요소는 자식요소가 float가 '뜨다'라는 영어단어인 것 처럼 붕~ 떠서 가로배치되니까 부모요소는 '앗! 난 자식요소가 없구나. 그럼 난 높이가 없네...' 라고 생각해서 높이가 없어지는 것 입니다. 정확히는 없어지는 것이 아니라 height: auto인거죠.

부모요소의 높이 값을 찾아주기 위한 2가지 방법

1) 부모요소에 overflow: hidden 주기

2) overflow: hidden 대신에 부모요소에 :after 가상클래스로 높이값 찾아주기

대부분의 경우 overflow: hidden으로 부모요소의 높이 값을 찾아주면 됩니다.
하지만 아래의 경우로 배치를 할 경우 span의 반이 hidden 되는 문제가 생깁니다.

이런 경우를 방지하기 위해서 부모요소의 높이 값을 찾아주기 위한 2가지 방법 중에 부모요소의 :after 가상클래스로 높이 값을 찾아주는 2번 방법으로 하셔야 합니다.

코딩웍스 유튜브 float관련 영상

CSS로 HTML 요소 가로 배치하기(float, overflow, clear, inline-block)

https://www.youtube.com/watch?v=EWqZIFUFJl0