📌 Float의 목적
★ 가로배치! ★
어떤 요소를 옆으로 옮기고 싶을 때 사용할 수 있다.
하지만 그렇게 호락호락하게 옮겨지지 않는다는게 문제..!!
📌 무슨 일이 일어나나!
해당 element가 붕뜬다 => 2d인 웹페이지가 3d처럼 움직인다고 생각해보자!
👀 위로 올라가버린 요소로 인해 일어나는 일들은 다음과 같다.
-
부모와 다른 형제들이 자식의 위치를 알아채지 못한다.
모든 자식이 float일 될 경우, 해당 부모의 height값은 0이 된다.
: 기본적으로 부모의 height가 따로 입력되지 않는다면, 자식 요소들의 height 합만큼 자리를 차지하게 된다. 하지만 모든 자식들이 float이 되어 올라가면, 부모는 자식의 위치를 알 수 없고, 자연스레 영역이 사라지게 되는 것이다. -
float을 가진 요소의 성격이 block으로 변한다.
해당 요소의 display가 inline 또는 inline-block일지라도, float이 적용되면, block으로 바뀐다.
따라서 inline 속성을 갖던 태그(ex. span, a)도 margine과 padding을 적용할 수 있다.하지만 여기서 문제는 완전하게 block의 성격으로 바뀌지 않는다는 것이다!
★길막 능력 상실★
-> 실제 컨텐츠만큼만 width를 갖게되고, block일 때 자동으로 생기던 margin이 생기지 않는다.
- 그 외의 block인 요소들은 float된 요소의 위치를 알아채지 못하지만, 그 안에 들어있는 contents는 float된 요소를 피해 정렬된다.
📌 해결방법
간단한 방법
float된 요소를 감싼 부모에게 overflow:hidden을 적용하기
-> 자식을 못찾던 부모가 바로 위치를 알아낸다.
복잡한 방법
부모의 마지막 자식에게 clear property를 사용하면 된다.
(참고: clear는 block일때만 적용된다!)
이때 임의로 div를 추가해서 clear를 적용할 수 도 있지만, pseudo-element에게 적용할 수 도 있다.
-> 의미없는 div의 남용은 바람직하지 않기에 후자의 방법을 사용해보도록하자!!
예시)
parent::after{
content: '';
display:block;
clear: left;
}
위의 방법을 약간 응용해서, 재사용 가능한 class로 적용할 수도 있다.
.clearfix::after{ content:''; display:block; clean: both; }clearfix라는 class를 만들어놓으면, 필요할때 마다 class를 적용하면 된다~~!
📌 마무리
- 가로로 배치하고 싶은 요소를 정하고 그 아이에게 float적용하기!
- 그 아이를 감싼 부모에게 clearfix 클래스 적용하면 끝 😎
