float

float 속성

float 속성을 통해 특정 요소를 일반적인 배치에서 벗어나도록 설정한다.

• float : left; - 소속 영역의 왼쪽으로 해당 요소를 붙인다.

• float : right; - 소속 영역의 오른쪽으로 해당 요소를 붙인다.

text 배치

float 설정된 요소와 text는 조화를 이루어 배치된다. 해당 영역만큼 뒤로 밀려서 표시된다.

clear

clear 속성은 float 요소 이후에 배치되는 일반 항목들을 구분하고 싶을 때 사용한다.

• clear:left; - float:left; 효과를 제거한다.

• clear:right; - float:right; 효과를 제거한다.

• clear:both; - float:left;, float:right; 효과를 모두 제거한다.

가상 선택자를 이용한 clear 처리

float 속성을 사용하다 보면 clear 속성을 부여할 태그를 정하는 것이 어렵다. 위의 예제처럼 비어있는 div를 만들어서 clear 속성을 부여하는 경우가 생기기 때문에 낭비되는 태그가 발생한다. 이러한 문제점을 해결하기 위해서 float 영역을 설정하여 그 영역이 종료될 때 가상 선택자로 clear를 수행하도록 구현할 수 있다.

1. float-container 설정

2. float-container::after 생성

   1. content:""; 으로 영역 생성

   2. display:block; 으로 배치 설정

   3. clear:both; 설정

float를 이용한 메뉴 구현

다음은 float 속성을 이용하여 구현한 메뉴이다. 이해를 돕기 위해 최소한의 태그로 예제를 구성하였다.

• menu-wrapper : 메뉴가 표시될 float-container

  • menu-item-left : 좌측에 표시할 메뉴 아이템

  • menu-item-right : 우측에 표시할 메뉴 아이템