그림 12-8 왼쪽 구름과 오른쪽 구름이 같은 선상에 놓이지 않음

 

오른쪽 구름이 브라우저 오른쪽 끝으로 이동은 했지만 왼쪽 구름과 같은 선상에 놓이지 않았습니다. 기본적으로 float 속성은 부모 창의 너비에 영향을 받습니다. 현재 브라우저 창의 너비가 왼쪽 구름과 오른쪽 구름의 너비의 합보다 작기 때문에 오른쪽 구름이 아래로 밀려난 것입니다.

와이드 모니터로 보거나 브라우저 화면 비율을 낮추면 양쪽 구름이 같은 선상에 놓이지만, 브라우저 창의 너비를 줄이면 오른쪽 구름이 아래로 밀려납니다.

float 속성을 사용하기 위한 조건을 정리하면 다음과 같습니다.

■ 부모에게 고정값(px)을 적용합니다.

■ 부모의 너비가 가변값을 갖고 있다면, float 속성이 사용된 영역에 가변값(%)을 적용합니다.

■ absolute 속성값과 함께 사용할 수 없습니다.