- float 프로퍼티: 레이아웃 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용
- 이미지 주위를 텍스트로 감싸기 위해 사용 -> 페이지 전체 레이아웃을 잡을때도 중요하게 사용됨
1.정렬
float: left; : 왼쪽부터 가로 정렬
float: right; : 오른쪽부터 가로 정렬
-> 오른쪽 가로 정렬의 경우 먼저 기술된 요소가 가장 오른쪽에 출력
-> float프로퍼티는 좌측, 우측 가로 정렬만 가능
-> 중앙 가로 정렬은 margin프로퍼티 사용
2. width
- 기본값: 100%, 프로퍼티값 지정하지 않은 block요소는 부모 요소의 가로폭을 가득 채움
- width 프로퍼티 선언 안한 block 레벨 요소에 float vmfhvjxlrk tjsdjsehlaus inline요소처럼 content 길이에 맞춰지고 다음 요소 위에 떠있게 됨
- 프로퍼티값 지정안한 block 요소 위에 float 선언한 block요소가 떠있어도 지정안한 block요소는 본래의 width(100%)를 유지함
3.float 프로퍼티 관련 문제 해결 방법
(1)float 프로퍼티가 선언된 요소와 float 프로퍼티가 선언되지 않은 요소간 margin이 사라지는 문제
- float 프로퍼티를 선언하지 않은 요소에
overflow: hidden;프로퍼티 선언 -> float 프로퍼티가 없어서 제대로 표현되지 못하는 요소를 출력해줌
(2)float프로퍼티가 선언된 자식 요소를 포함하는 부모 요소의 높이가 정상적으로 반영되지 않는 문제
: float요소는 일반적인 흐름상에 존재하지 않기 때문에 높이를 알 수 없음 -> 부모 요소 이후에 위치하는 요소의 정렬에 문제 발생
- 프로퍼티가 선언된 자식요소의 부모 요소에
overflow: hidden;프로퍼티 선언 - 부모요소에 float 프로퍼티 선언 -> 부모요소의 너비는 float된 자식요소 콘텐츠가 나올만큼만으로 작게 줄어듬, 권장방법X
- 부모요소 마지막에 빈요소 만들어서
clear: both;속성 적용 -> 의미없는 빈 요소를 사용하여 코드를 더 입력해야한다는 단점, 권장방법X
-::after가상요소 선택자 사용clearfix::after-> 부모요소에 사전에 작성한 clearfix 클래스만 추가하거나, 해당요소를 선택하여 클리어 문법을 선언 - float 프로퍼티 대신
display: inline-block;을 선언: 두 요소 사이에 정의하지 않은 공백(4px)이 자동 지정 ->font-size: 0;을 사용하여 공백 제거 가능
Reference
poiemaweb
