Float

float

• 수평 정렬 (.. 기능이었으나, flex가 생기고 이 기능으로는 잘 안쓰고 있긴 함)

• 수평 정렬을 하고 싶은 아이템에 float 스타일 추가하면 됨

• 항상 float하지 않는 다음 요소에 float 해제줘야 함 ⇒ clear 속성으로
• 해주지 않으면 부모요소 밖에 float 아이템들이 위치하게 됨
• 부모 요소에 overflow: hidden으로 대처할 수 있지만, 이것은 맞춤 해결 방법은 아님
• ::after로 가상요소를 만들어서 해당 요소에서 clear해줌
• clear 속성 , both로 값 입력하면 left와 right모두 대응 가능

• float 속성 아이템의 부모 요소는 float 속성이 되어 있는 애들만 자식로 둬야 함
⇒ 안그러면 레이아웃에 문제가 생김 (하단 사진의 오른쪽 처럼)

• float를 쓰면 해당 요소의 display의 *대부분은* block으로 바뀜
• (*) flex, flex-inline, grid 등일 때는 변하지 않음

그 외 CSS

• div의 color : 글자 색, border/padding 등의 색을 지정해주지 않으면 요소가 가진 이 color 값을 따라간다

• 최상위 부모 요소(전역 요소)의 스타일은 맨 위에 정의해주는 것이 좋음