CSS float 속성이란 무엇일까요?

안녕하세요. 지오입니다. 오늘은 CSS의 float 속성에 대해 알아보도록 하겠습니다.

float 속성이란?

float 속성은 요소를 어떻게 띄울 것인지를 나타내는 것입니다. float 속성을 사용하면, 다른 요소들이 해당 요소 근처에 떠다니게 됩니다. float 속성을 사용해 이미지를 좌, 우로 정렬할 수도 있으며, 이를 활용해 웹페이지 레이아웃도 구성할 수 있습니다. 여기서는 다음과 같이 float 속성을 사용해 다음과 같이 두문자를 강조해보겠습니다.

<p><span class='first_text'>W</span> ith this property you can emphasize the first letter. In the paragraph above, the first letter of the text is embedded in a span element.</p>

.first_text{
    float: left;
    font-size: 200%;
  line-height: 80%
}

float 속성을 통한 두문자 강조

float 속성 제어하기

float 속성을 사용하면 해당 요소의 빈 공간으로 다른 요소가 들어오게 됩니다. 이를 제어하려면 clear 속성을 사용하면 됩니다. 예를 들어, 특정 이미지 이후 등장하는 <p> 태그 양쪽의 float 속성을 제거하고 싶다면 다음과 같이 clear 속성 부여할 수 있습니다.

<img src="image.gif" width="100" height="130">
<p> This is a normal text. </p>
<p class="clear"> This is another text. </p>

img {
    float: left;
}
p.clear{
    clear: both;
}

왼쪽에만 float 속성을 제거 하고 싶을 때는 clear: left;, 오른쪽에만 float 속성을 제거 하고 싶을 때는 clear: right;를 선언하면 됩니다. 참고로, Absolute 속성을 사용한 경우 float 속성이 무시됩니다.