CSS-Float , Clear 속성 정리

Float

Float 속성의 용도

float의 단어는 원래 '뜨다'라는 의미를 가지고 있다.

float속성은 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가 에대한 속성입니다.

하지만 요즘에는 레이아웃을 구성하는대에도 많이 사용하고 있습니다.

Float 의 속성값

• none : 요소를 부유시키지 않습니다. 기본값 입니다.
• left : 요소를 왼쪽으로 부유시킵니다.
• right : 요소를 오른쪽으로 부유시킵니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모요소로 부터 상속 받습니다.

left와 right를 사용해서 부유속성을 지정하면 display의 값은 무시됩니다.

다만 none의 속성값일때는 제외합니다.

 

Clear

Clear 속성의 용도

float 속성을 통해 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰입니다.

방향에 따라 3가지 속성값을 사용할 수 있습니다.

• left : 좌측 부유 제거
• right : 우측 부유 제거
• both : 양측 부유 제거

after 가상선택자와 clear

clear 속성을 사용하기 위해서는 float 요소 다음에 clear 하는 태그를 사용해줘야하는 불편함이 있습니다.

그래서 간단하게 clear해주기 위해서 float 가 부여된 요소에 ::after 가상선택자를 사용해서

clear를 적용해서 float 속성의 흐름을 제거할 수 있습니다.

종류	left	right	none
너비	최대한 줄어듬	최대한 줄어듬	그대로 유지
본질	위로 올라 갈 수 있으면 올라간 후 좌측정렬	위로 올라 갈 수 있으면 올라간 후 우측정렬	-
block로 부터 무시	무시당함	무시당함	무시 당하지 않음
inline,inline-block로 부터 무시	무시 당하지 않음	무시 당하지 않음	무시 당하지 않음