float, clear, clearfix 속성

float 속성

float 속성은 <img>, <div>, <p> 등 문서를 구성하는 모든 요소에 적용할 수 있다. absoulete 속성과 다른 점은 세 가지 정도이다.

  • absoulete와 float는 위치를 지정하는 방법이 다르다.
    absoulete는 부모 요소의 네 모서리 모두 기준점이 된다. float는 left와 right 속성 값에 따라 좌, 우상단 모서리만 기준점이 된다.
  • absoulete 속성이 부여된 요소는 텍스트가 둘러싸지 못하지만, float 속성이 부여된 요소는 텍스트가 둘러쌀 수 있다.
    A 요소와 B 요소가 수평으로 나란히 있을 경우, B가 텍스트 요소일 경우 차이가 난다. A 요소에 absoulete 속성이 설정되면 B 텍스트 요소는 뒤로 숨겨지는데 반해, float가 설정되면 B 텍스트 요소는 A 요소를 둘러싸게 된다.
  • float는 영향력을 제어할 수 있는데 반해, absoulete는 영향력을 제어할 수 없다.
    float와 absoulete는 모두 아래에 위치한 요소에 영향을 미치지만, 차이점이 있다. absoulete 속성을 가진 요소의 높이 값만큼 뒤에 위치한 요소의 위쪽 마진(margin-top) 값을 설정할 수 있지만, absoulete된 요소의 높이 값이 바뀔 경우 두 요소는 겹치게 된다.
    반면 float는 뒤에 위치한 요소에 clear 속성을 적용하면 영향력을 벗어날 수 있다.

clear속성

float 속성이 적용된 요소 뒤에 있는 요소는 float 속성의 영향을 받는다. 이 영향을 벗어나게 하는 속성이 clear 속성이다.

clearfix 속성

코드로 해결하지 못한 문제로는, float 속성을 이용한 요소는 부모 요소가 감싸지 못하는 문제가 있다. floating 요소가 아래 요소에 영향을 끼쳐 레이아웃을 흐트러뜨릴 수 있다. 이 문제를 해결하는 여러 가지 방법이 있는데 여기서는 clearfix를 이용해서 해결하는 방법으로, 기존의 방식보다 더욱 간결한 Micro clearfix 방법을 소개한다.

“float, clear, clearfix 속성”에 대한 2개의 댓글

답글 남기기