CSS float

float라는 속성은 원래 이미지 옆에 텍스트가 물 흐르듯이 레이아웃을 구성하기 위해서 만들어졌다.

아래의 그림참조

float 유래

 

span, img와 같은 요소에게 float속성을 적용하면 display속성이 자동으로 block으로 변하기 때문에 width,height,margin,padding속성값을 자유롭게 적용 시킬 수 있다.

 

헷갈리는 점

자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못한다는 점

그래서 자동으로 Block레벨 요소(컨테이너 박스)는 자식들의 컨텐츠 높이를 차지하게 되어 있지만 높이가 아예 없는 상태가 된다.

 

왜 이런 현상이 발생하는 것일까?

블록 레벨 요소와 인라인 요소들은 normal flow에 따라 레이아웃이 결정된다. 하지만 float, position(absolute, fixed)등의 속성값을 주게 된다면 normal flow에서 벗어나게 된다. 결국 이런 현상으로 다른 주변 요소들은 벗어난 요소들의 위치를 알 수 없게 되고 자동으로 위치 변동이 발생하게 된다. 아예 float, position(fixed, absolute)속성값이 적용된 요소를 인식하지 못한다.

 

해결방안

1. 부모요소에 overflow속성 추가하기(꼭 주의해야 될점은 overflow:visible은 제외된다는 것!!!)

overflow:hidden; 혹은 overflow:scroll; 등 overflow:visible;을 제외한 overflow속성을 추가

 

2. 부모 요소의 높이 값을 직접 지정(반응형 웹에 적합하지 않기에 비추천)

강제로 부모에 높이를 주어 늘리는 것이므로 좋은 방법은 아니다.

만약 자식 요소의 높이가 변경 되었을 경우 혹은 자식 요소가 추가되어 부모 요소의 높이 수정이 불가피한 경우마다 부모의 높이를 변경해야 하므로 비효율적이다.

 

3. clear 속성 사용(빈 요소를 만드는 것이기에 비추천)

float 이 사용된 요소의 바로 다음 형제 요소에 clear 속성을 사용합니다. clear 속성은 left, right, both 세 가지 값을 가지며 float이 사용된 요소가 정렬된 방향에 따라 적절히 사용해 주시면 된다. 보통은 float속성값에 따라서 clear를 주는 속성값이 달라지지만 이런 경우를 고려하는 것이 귀찮기 때문에 both속성값을 준다.

 

4. clear-fix 방법(자주 사용하는 방법)

CSS의 ::after 가상요소로 해결 float속성을 적용한 요소의 부모요소에 ::after를 사용해주면 된다.

부모 요소에 가상으로 마지막 child 요소를 덧붙여서 부모 요소인 wrap이 자식 요소들을 알아보게 하는 방법

 

부모요소에게 float속성이 적용이 되어 있다면 모든 float로 된 자식들을 알아볼 수 있게 된다. 그래서 레이아웃이 망가지지 않는다.

이것은 한번 실습을 해봐야겠다.