5. CSS 위치 속성 - float, clear, overflow

float

한글에서 어울림 효과와 동일하다.

See the Pen float 예제 by zakelstorm (@zakelstorm) on CodePen.

어울림 효과 외에도 웹페이지의 layout을 위해서도 사용된다.

See the Pen float 속성을 이용한 layout by zakelstorm (@zakelstorm) on CodePen.

 

---

clear

float가 있다면 float가 아닌 element는 위치를 지정하기 힘들어진다.

float가 적용된 요소에 display: block을 하더라도 해결되지 않는다.

See the Pen float/clear 문제상황 by zakelstorm (@zakelstorm) on CodePen.

이를 해결하기위해 float에 영향 받지 않도록 하는 attribute가 clear다.

왼쪽 float 요소에 어울림 적용을 받고 싶지 않다면 clear:left;

오른쪽 float 요소에 어울림 적용을 받고 싶지 않다면 clear:right;

left와 right 두 요소 모두 어울림 적용을 받고 싶지 않다면 clear:both;

 

만약 한 라인에 float left와 right가 둘다 존재하는 상황에서 둘 중 한 방향만 clear를 적용하면 어떤 현상이 발생할까?

해당 요소는 float는 적용받지 않게되어 다음줄에 출력되게 된다.

See the Pen clear 예제 by zakelstorm (@zakelstorm) on CodePen.

 

---

overflow

overflow는 자식요소의 내용(contents)의 크기가 부모 요소의 박스를 넘어갈 때 어떻게 처리할지를 설정함

• visible : 기본 값. 넘칠 경우 컨텐츠가 상자 밖으로 보여진다.
• hidden : 넘치는 부분은 잘려서 보여지지 않는다.
• scroll : 스크롤바가 항상 추가되어 보여진다.
• auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정한다.

※주의: overflow가 예상외로 안먹히는 경우가 종종 있다. 이때는 position과의 관계를 봐야한다.

부모 요소라고 해도 위치종속적이지 않은 관계에서는 overflow가 자식요소에게 먹히지 않는다.

대표적으로 fixed 자식요소와 static의 부모요소를 가진 absolute 자식요소가 해당된다.

 

See the Pen overflow problem by zakelstorm (@zakelstorm) on CodePen.