CSS : 요소 위치 속성 float 기본과 활용
float 위치 설정
* 같은 부모 안 형제 요소(인라인 또는 블록)에 작성하여 위치를 설정합니다.
* center값은 없으며 좌우로만 배치할 수 있습니다.
* right 값을 2번 이상 사용 시 순서가 역순이 됩니다. ex) 123 => 321
float:left
float:right
float:none;
float 위치 제거
* float 설정 시 좌-우로 형제요소들이 배치되는 것을 볼 수 있는데 float를 특정 대상부터 적용되게 하고 싶지 않을 경우 (아래)속성을 이용하면 됩니다.
clear:both;
float 사용 시 부모 높이 인식 문제 해결 방법
* HTML 자식 요소를 가지고 있는 부모 요소는 안에 배치된 자식 요소의 높이를 자동으로 인식하여 동일 높이로 인식합니다.(좌측 이미지 형태)
* Float가 자식 요소에 적용되면 부모에서 떨어져 나와 부유되며 부모는 자식의 크기를 더이상 인식하지 못합니다.(우측 이미지 형태)
==> 이 문제를 그대로 방치하면 배경색, 다음 형제 처리 등 다양한 문제가 발생할 수 있습니다.
문제해결방법1. 높이 설정하기
* 부모 대상에 강제 높이를 설정하여 자식의 크기에 영향을 받지 않도록 합니다.
부모 { height:px }
문제해결방법2. 가상클래스선택자 생성하기
* 부모의 자식 요소를 가상으로 생성하여 가상자식요소만큼 크기를 인식하도록 합니다.
부모:after {content:''; display:block; clear:both;}
문제해결방법3. 영역 인식
* float로 인해 부유한 자식요소들을 잡아들여 영역을 다시 인식하도록 합니다.
부모 {overflow:hidden;}
문제해결방법4. 다음 형제요소에게 float 제거하는 명령어 입력하기
* 인접한 형제 요소에 clear:both 를 입력하여 float의 겹침 오류를 해결합니다.
* 기존 부모의 높이는 0으로 유지됩니다.
부모 다음 형제 {clear:both}