Float

Float

float속성은 보통 이미지에 많이 사용한다. 이미지를 왼쪽이나 오른쪽에 떠다니도록 하면, 이미지 다음에 나오는 문자열이 이미지를 둘러싸고 나오게 된다. HTML에서는 그림 옆에 문자열을 넣을 경우, 항상 한 줄만 나오고, 나머지는 그림 아래로 내려가게 되는데 이를 활용해 웹페이지 레이아웃도 구성할 수 있습니다. 모든 element에 적용되며, 초기값은 none이며, 상속하지 않는다.

<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 속성을 사용하면 해당 요소의 빈 공간으로 다른 요소가 들어오게 된다. 이를 제어하려면 clear 속성을 사용하면 되는데 예를 들어, 특정 이미지 이후 등장하는

태그 양쪽의 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 속성이 무시된다.