sanguk.dev
작성완료
요소의 정렬

요소의 정렬

float 속성은 요소를 떠 있게 하며, width는 inline처럼 변경되지만 다음 block 요소의 너비에는 영향을 미치지 않는다. float 요소 간 margin 문제와 부모 요소의 높이 반영 문제를 해결하기 위해 overflow: hidden을 사용하거나 clearfix::after 가상 요소를 추가하는 방법이 권장된다.

CSS & SASS & SCSS

float

  • 해당 요소를 다음 요소 위에 떠있게 한다. (가리지는 않음)
  • position이 absolute와 병행해서 사용하면 안 됨.

width

  • float 적용 시 inline처럼 content의 크기만큼 width가 변경됨.
  • 다음 block요소가 그 크기만큼 가로가 작아지는게 아님. (여전히 width 100%)

관련 문제

  • float가 선언된 요소와 그렇지 않은 요소간 margin이 사라짐
    • 원인 : 후자 요소가 float가 아니기 때문에 박스 모델 상에서 문제가 생김
    • 해결방법 : 후자 요소에 overflow : hidden을 선언
  • float 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않음
    • 원인 : float 요소의 높이를 부모가 알지 못함.
    • 해결방법
      • clearfix::after 가상 요소 추가 (권장)
        css

.clearfix::after {
content : '';
display : block;
clear : both;
}
```
- 부모 요소에 overflow : hidden 선언