[CSS] 학습내용 정리 - Float

Float

사용 목적 : 'block'들을 가로배치하기 위해서

'float' 설정하게 되면 발생하는 일

1. 빈 공간으로 인식한다.
   • 주변 자식 요소들은 빈 자리를 채운다.
   • 부모 요소의 'height' 값도 줄어든다.
2. Display가 'block'으로 바뀐다.
   • 'width'와 'height' 값 설정가능
3. 제대로 된 'block' 역할을 하지 못한다.
   • 'content' 크기만큼 'width' 값을 차지한다.(부모 요소의 'width' 100%만큼 차지하지 않음)
   • 'margin' 값을 설정해도 인식하지 못한다.
4. 모든 자식요소가 'float'하게 되면 부모 요소의 'height' 값은 0이 된다. 
   • 전체 레이아웃 붕괴를 일으킬 수 있다.

---

Float 관리하기

1. 부모 요소에게 'overflow: hidden' 설정을 한다.
   • 'float'된 자식 요소의 'height' 값만큼 설정된다.(자식 요소의 위치를 찾음)
2. 'clear'를 사용한다.
   • 'float' 설정 값을 따라서 'clear'의 값을 설정해주면 인식
   • 'clear' 값 종류 : left, right, both
   • Display가 'block'인 요소만 인식

---

Float 활용하기

CSS의 가상요소(Pseudo-Element)를 부모요소에게 활용

• 불필요한 HTML Tag를 더 사용할 필요가 없음