Float로 망가진 것을 고치는 방법

1. 개꿀 방법 - overflow: hidden;

원래 자식이 float를 하게 되면 부모는 집나간 자식을 찾지 못해 이렇게 height가 0으로 쪼그라들게 되었다.

하지만 overflow: hidden;을 주게 되면 부모가 집나간 자식을 찾을 수 있게 된다!

지난 시간에 망가진 레이아웃을 고쳐보자!

지난시간에 이렇게 망가졌던 레이아웃이다.

하지만 parent에게 overflow: hidden; 속성을 주게 되면?

parent도 자식들의 height를 찾게 된다.

2. Clearfix - 조금 더 정석적인 방법

clear는 오로지 float로 인해서 망가진 레이아웃을 고치기 위해 존재하는 속성이다.

clear가 뭐임 그래서?

위의 요소에 이렇게 float 속성을 주게 되면

당연히 아래의 block이 위에 겹치게 올라오게 된다.

하지만 clear: left 속성을 주게 되면 float: left가 된 녀석을 감지하고 아래로 내려가게 되고,

parent는 아래 자식을 기준으로 자식의 height의 합을 계산할 수 있게 된다

clear의 3가지 left | right | both

clear: left는 float: left를,
clear: right는 float: right를 각각 알아차리게 되고,
clear: both의 경우, float: left와 float: right 모두 알아차려 영향을 받지 않게 된다.

가상의 시나리오

이런 상품카드를 가로로 배치하려한다고 하자.

하지만 float만 해주게 되면 레이아웃이 와장창 될 것이다.

그럼 이렇게 의미 없는 div를 넣어서 레이아웃을 잡아 주어야 하는데...

스타일적인 이슈 때문에 html 마크업을 넣어주어야 하다니..

Pseudo-Element

임의의 html 요소를 만드는 대신에, css로 fake 요소 (가상 요소)를 만들면 된다.

이렇게 ::before과 ::after은 각각 가장 첫 번째 자식, 가장 마지막 자식으로 가상 요소가 생기게 된다.

<div class="pseudo">Red</div>
<div class="pseudo">Yellow</div>
<div class="pseudo">Blue</div>

.pseudo::before {
  content: '✨';
}

가상 요소는 반드시 content를 넣어주어야 한다 !!

이렇게 가상의 요소를 넣어줄 수 있다.

다시 원래로 돌아와서....

.parent::after {
  content: '';
  display: block;
  clear: left;
}

※ clear 속성은 display: block; 인 애들에게만 사용할 수 있으므로 주의하자!