float는 CSS에서 정렬하기 위해 사용되는 속성이다.
그대로 직역하면 '띄우다' 라는 뜻인데, 어떠한 Element가 보통의 흐름(normal flow)를 벗어나 float를 이용해 띄워지면(정렬되면) 텍스트 및 인라인(inline) 요소가 그 주위를 감싸며 흐르듯 배치되기 때문에 이러한 이름이 붙여진 것으로 보인다 🤔
float의 키워드 값으로는
none,left,right,inline-start,inline-end가 있다
-
left는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드이다. -
right는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드이다. -
none는 요소가 부동하지 않아야 함을 나타내는 키워드이다. -
inline-start
는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드이다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽. -
inline-end는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드이다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.
그리고 '절대위치 요소는 float 속성을 무시한다' 는 점을 기억해 두도록 하자 🙆
글만으로는 float 속성에 대해서 확 와 닿지는 않을 것이다. 코드와 이미지를 통해 자세히 알아보자.
<html>
<head>
<style>
#a{
border: 1px solid red;
margin: 0;
}
#b{
border: 1px solid blue;
margin: 0;
}
</style>
</head>
<body>
<div id="a">Hello</div>
<div id="b">World</div>
</body>
</html>위의 코드는 아래와 같이 나타난다. div 태그는 block을 기본값으로 갖고 있는 태그 이기 때문에 div.a와 div.b가 한 줄(block) 전체를 차지한 것을 볼 수 있다.
그렇다면 이 상태에서 div.a에 float:left; 값을 주면 어떻게 변할까?
위와 같이 float:left; 값을 가진 hello는 inline과 같은 형태를 띄고, div.b는 block 값으로 한 줄 전체의 공간을 차지하는 것이 정상이지만 hello 바로 옆에 길게 자리한 것을 볼 수 있다.
이것은 div.b 가 float 속성을 지닌 태그 요소를 무시하기 때문이다.
그렇다면 마지막으로 div.b에도 float:left; 값을 주면 어떻게 될까?
위와 같이 두 요소가 나란히 나타나게 된다.
하지만 우리는 때론 float 속성을 이용해서 오른쪽 또는 왼쪽에 정렬하되, 그 옆의 공간은 비워두고 싶을 수도 있다! (언제 어떤 layout이 필요하게 될지 모르는 일이다 🤔)
그럴 때 우리가 사용할 수 있는 프로퍼티가
clear이다.
위의 예시에서 만약 Hello라는 글씨를 float:left;를 사용해 왼쪽에 정렬하고, 오른쪽은 비우고 싶다면 World에 clear:left; 속성을 줘 보자
위의 그림과 같이 hello 오른쪽의 공간이 비워지고 world가 아래의 공간으로 내려간 것을 볼 수 있다.
이처럼 clear:left; 속성을 가진 태그는 float:left;의 영향을 받지 않으며, clear:right;의 속성을 가진 태그는 float:right; 의 영향을 받지 않는다.
**clear:both;라고 하면 모든 float의 영향을 받지 않기 때문에** 보통 이것을 제일 많이 사용한다.
