CSS / float와 overflow

float

float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다.

overflow

overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 내용이 주어진 공간에 다 들어가지 않을 때, 보여주게 할 수도 있고, 안 보이게 할 수도 있고, 스크롤바를 만들게 할 수도 있습니다.

float와 overflow

float와 overflow가 만나면 특이한 결과가 만들어집니다. 다음은 float 속성만 있을 때의 모양입니다.

박스 주의에 텍스트가 배열되고, 박스 아래에도 텍스트가 있습니다. 여기에 overflow 속성을 추가한 후 속성값을 auto로 하면 다음과 같이 만들어집니다.

overflow 속성값을 hidden, scoll로 바꾸어도 비슷한 결과가 나옵니다. 요소를 출력하는 가로폭 전체를 줄이는 효과가 있습니다.

CSS 강좌