CSS - float property

css에서 selector에 주는 float property 값은 해당 요소를 일반적인 흐름으로부터 빠지고, 다른 요소들이 그 주위를 감싸며 배치되도록 만든다.

float

block 요소에게 float property를 넣어 inline 성질을 부여할 수 있다. 값으로는 none(default), left, right 등이 있다. 참고 링크

float: right이나 left 그 쪽에 자석같이 딱 붙음. 그 뒤에 오는 요소는 inline 요소 뒤에 넣었을 때처럼 나타난다.

뒤에 오는 요소에 float를 적용한 요소의 크기만큼 margin을 주면 영역이 분리된 것처럼 보인다.

float가 적용된 요소에 width를 퍼센트로 줄 경우 window 크기가 그보다 작게 줄어들면 비율을 유지하며 같이 줄어든다.

clear

float 뒤에 오는 요소에 넣어야 멀쩡해보임. float된 걸 초기화.

앞에 오는 float가 left면 clear도 left, right면 clear도 right 넣어야 된다. 이거 안 맞으면 소용 없음.

clear: both;도 있음.

뒤에 오는 요소가 없어도 종료 시점에는 clear을 해주는 편이 좋다. 나중에 핸들링하거나 추가시 발생할 오류를 방지. 참고 링크

 

이미지에 float를 줬는데 div 바깥으로 넘칠 때

1. div에 overflow: auto;를 주면 이미지 사이즈에 맞춰 div가 커진다. 이걸 clearfix hack라 한다. 참고 링크

2. div에 overflow:hidden;을 주면 된다.

3. div에도 float를 넣는다. 이러면 요소의 성질이 변화하므로 이에 따른 변화를 수정해줘야 된다.