📒 단골 중에도 단골.. float clear
실무를 하면서도, 테스트에서도 아주 기본이고 단골 중에서도 단골인 float 해제하기.
몇가지 방법을 기록한다..✍🏻
📌 Why
float은 본래 이미지와 텍스트를 자연스러운 흐름으로 배치하기 위해 고안된 속성이나, 실무에서는 주로 어떠한 요소들을 옆으로 배치할 때 사용한다. 하지만 float 을 사용하면 브라우저가 높이를 인지하지 못하게 되기 때문에 clear 하는 과정이 필요하다.
예제를 통해 테스트 해본다.
📌 1. 부모에 height 적용
- float된 요소들의 부모태그에 height를 적용하면 clear된다.
- 높이가 바뀔때마다 수정되어야하며,반응형 대응이 불가.
📌 2. 부모에 overflow:hidden 적용
- float된 요소들의 부모태그에 overflow:hidden을 적용한다.
- 하단의 예시처럼 부모 바깥으로 표현되어야하는 요소가 있을 때 표현이 불가하다.
📌 3. 부모에 float 적용
- float된 요소들의 부모태그에도 float 속성을 적용한다.
- float이 적용되면서 inline-block 아이템이 되고, 다음요소가 옆으로 배치된다.
- 해당 박스요소를 중앙이나 원하는 위치로 배치하기 어려워지고, 다음에 오는 요소 또한 원하는대로 배치되지 않을 가능성이 높다.
📌 4. 부모에 display:inline-block 적용
- float된 요소들의 부모태그의 display 속성을 inline-block으로 적용한다.
- float은 클리어되지만 부모태그가 inline-block이 되면서 의도하지 않은 레이아웃이 될 수 있다.
📌 5. 부모 다음 요소/임의의 요소에 clear:both 적용
- float된 요소들의 부모태그 다음에 오는 요소 또는 임의의 요소를 만들어 clear:both를 한다.
- 줄바꿈은 적용되지만 부모태그의 높이는 여전히 인지되지 않으며,
- 다음 요소가 어떤 클래스를 사용하는지에 따라 매번 수정될 가능성이 있으며, margin-top 이 정확하게 적용되지 않는다.
- 또한 임의의 요소에 clear:both를 적용하는 것은 굳이 불필요한 요소를 추가하는 것이기에 가장 비추천하는 방법이다.
📌 ⭐️6. 부모에 가상요소 after에 clear:both
- float된 요소들의 부모태그에 가상요소 after를 사용해서 clear:both를 적용한다.
- 가장 보편적으로 이용되는 방법이다.
- 부모태그가 의도치 않게 inline-block 요소로 바뀌지 않으며, 높이가 정확하게 잡히고, 불필요한 요소가 추가되지 않는다.
📌 ⭐️7. 부모에 display:flow-root 적용
- float된 요소들의 부모태그의 display 속성을 flow-root로 적용한다.
- 부모가 의도치않게 inline-block 요소가 되지도 않으며, 높이가 정확하게 잡히면서 float이 해제되고, 불필요한 태그도 필요없으며, 가상요소가 필요없이 가장 적은 스타일링으로 float이 clear된다!
- 단..하위 브라우저 지원이 안된다.. 익스를 지원하지 않는 프로젝트에만 사용 가능하다.(caniuse 참고)
👏🏻 마무리
🐱 : 최근에는 flex 위주로 사용하면서 float과 멀어졌었는데, float을 사용하면 주로 가상요소를 사용해 해제하는 방법만을 사용했었다. 공통 클래스(ex. clearfix)를 사용해서 해제하든, 해당 요소에만 적용해서 해제하든..
flow-root를 알고는 있지만 아직 실무에서는 아쉽게도 사용해본 경험은 없다. 늘 익스를 지원해야했기 때문에...
기회가 오면 실제 프로젝트에 사용해보고 싶다. 아마 좀더 뒤에는 flow-root만을 사용해서 간편하게 float을 해제하는 날이 오겠지..하는 생각이다. 굳이 비효율적으로 마크업할 이유가 없으니까..🤔
Markup Developer 💫