float의 이해

float: left/right;

 

▶ float : 블록요소를 좌우로 배치

- 특정 부모요소 안에서 좌우로 배치할 요소 모두에 float 설정

- 특정 요소를 float 처리하면 부모요소는 float 요소의 높이값을 인지하지 못함

 

 

▶ float 해제

- float 처리시 높이값을 인지하지 못하는 현상을 수정

 

1. 부모요소에 강제로 높이값을 지정 - 복잡한 레이아웃구조에 적합하지않음, 반응형 등

2. 부모요소에 overflow:auto; 지정 - 내부요소가 많을경우 스크롤이 생길 수 있음

3. 부모요소에 overflow:hidden; 지정

4. 부모요소에 float 지정 - 자식요소의 높이값은 인식하지만 레이아웃이 망가질 수 있음

5. float된 요소의 아래쪽에 배치되는 요소에 clear:both; 적용 - 아래쪽에 배치되는 요소가 없는경우 사용할 수 없음/html은 최대한 깔끔할수록 좋음

6. 가상선택자 ::after를 이용해서 clear:both;를 적용 / display:block; (추천)

 

- absolute를 사용할경우 float을 해제해주지않아도 됨

 

 

▶ 블록요소를 좌우 배치하는 방법

1. 좌우 배치할 요소 모두에 float: left; 적용

2. float을 배치한 부모요소에 ::after{conter:'';clear:both;display:block;} 구문을 적용해 float 해제

3. 부모요소 안에 좌우 배치되는 요소가 하나라도 있으면 그 안쪽에 있는 모든 블록요소를 float처리

 

 

▶ float 배치시 유의점

- float 배치시에 중간에 세로로 긴 요소가 배치가 되서 특정 방향에 빈 공간이 생겼을 때,

flat의 방향과 여백의 방향이 같으면 해당 빈 공간에 다음 요소들이 배치가 되지 않음

 

해결방법

- float의 방향을 변경