Float 속성은 display 와 position과 같이 웹페이지의 레이아웃을 짤때 많이 사용합니다.
하지만 float는 몇가지 알려진 문제점과 사용상의 불편한 점등 때문에 레이아웃을 짤때는 position을 더 선호하는 것 같습니다. 사실 position의 속성만 가지고도 충분히 레이아웃을 작성할 수 있습니다.
그러나 float 또한 CSS에서 매우 많이 사용하는 속성이므로 한번 알아보기로 하겠습니다.
float의 키워드는 "left, right, none, hide, inherit, inside, initial..." 등 많이 있습니다.
이중에서 사용되는 것은 대부분 아래의 2가지 뿐인 것 같습니다.
float : left // 요소를 왼쪽으로 붙여서 배치합니다.
float : right // 요소를 오른쪽으로 붙여서 배치합니다.
float:right 지정
[CSS code]
<style>
#container { width:720px; }
#header { height:50px; }
#sidebar { width:150px;height:200px;float:left; }
#content { width:550px;height: 200px;float:right; }
#clr { clear:both; }
#footer { height:50px; }
</style>
위와 같은 레이아웃을 작성할때 CSS 코드를 보면 sidebar요소에 float:left를 사용하고 content요소에 float:right를 사용하였다. 그리고 footer 바로위에서 clear:both를 사용해서 float속성을 해제하였다.
만약 clear를 사용하지 않은면 footer가 content옆으로 붙어 버린다.
또한 float는 문단에서 특정한 요소(그림)의 배치를 정할때도 유용하게 사용된다.
아래의 그림과 문단이 있는 예시는 그림 이미지에다 float 속성값중 left와 right값을 넣었다 뺐다 한 것입니다.
목련꽃 그늘 아래서 베르테르의 편질 읽노라 구름꽃 피는 언덕에서 피리를 부노라 아 멀리 떠나와 이름 없는 항구에서
배를 타노라 돌아온 4월은 생명의 등불을 밝혀 든다 빛나는 꿈의 계절아 눈물어린 무지개 계절아
★★Clear 속성 사용여부★★
목련꽃 그늘 아래서 긴 사연의 편질 쓰노라 클로버 피는 언덕에서 휘파람을 부노라 아 멀리 떠나와 깊은 산골 나무 아래서
별을 보노라 돌아온 4월은 생명의 등불을 밝혀든다 빛나는 꿈의 계절아 눈물어린 무지개 계절아
위의 버튼을 눌러보면 float의 left와 right에 대해 금방 이해가 갈 것입니다. 여기서 중요한 것은 글들이 그림옆으로 계속 흐르고 있다는 것입니다.
또한 float를 해제하기 위해서 clear:both를 하게되면 "★★Clear 속성 사용여부★★"부터 float의 영향으로 부터 벗어나게 됩니다. Clear버튼을 눌러 보시면 clear한 경우와 안한경우를 아실 수 있습니다. clear을 사용하면 더 이상 글들이 그림 옆에 있지 않고 독립적으로 움직입니다.
clear 속성을 사용하는데 속성값은 아래와 같습니다.
clear : left // float : left의 속성을 해제합니다.
clear : right // float : right의 속성을 해제합니다.
clear : both // float : left 와 float : right의 속성을 모두 해제합니다.
float는 위에서 나열한 left, right 와 float를 해제하는 clear 속성만 안다면사용하는데 큰 무리는 없을 것이라 생각합니다.
이 외에도 중요한 것들이 많이 있지만 지식이 짧음과 귀차니즘의 발동으로 인해 여기서 줄입니다.
참고: 위의 레이아웃 코드
<html>
<head>
<meta charset="utf-8">
<style>
#container {
width: 720px;
}
#header {
background-color: #fef9de;
border: 1px solid #333;
text-align: center;
height: 50px;
}
#sidebar {
background-color: #fef9de;
border: 1px solid #333;
text-align: center;
width: 150px;
height: 200px;
float: left;
}
#content {
background-color: #fef9de;
border: 1px solid #333;
text-align: center;
width: 550px;
height: 200px;
float: right;
}
#footer {
background-color: #fef9de;
border: 1px solid #333;
text-align: center;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<br/>
<div id="sidebar">sidebar<br/><br/>float:left 지정</div>
<div id="content">content<br/><br/>float:right 지정</div>
<div style="clear:both;"></div>clear:both 지정
<div id="footer">footer</div>
</div>
</body>
</html>
