Float

Float

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다.

clear 속성

clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다. 컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다.

        <style>
.left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
.right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
        </style>

따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 합니다.

<style>
.left { background-color: #FF8C00; width: 150px; height: 50px; float: left; }
.right { background-color: #9932CC; width: 150px; height: 50px; float: right; }
p { clear: both; }
</style>

overflow

loat 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 됩니다. 이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 됩니다.

<style>
.div { border: 3px solid #73AD21; padding: 5px;}
img { float: left; }
.good { overflow: auto; }
</style>

float 속성을 이용한 레이아웃

현재 웹 페이지의 레이아웃은 대부분 float 속성을 이용하여 작성되고 있습니다. 다음 예제는 float 속성을 이용해 작성된 레이아웃을 보여줍니다.

<style>
div.page { border: 3px solid #CD5C5C; overflow: auto; }
h2 { text-align: center; }
header{ border: 3px solid #FFD700; }
nav { border: 3px ​​​​​​​solid #FF1493; width: 150px; float: left; }
section { border: 3px ​​​​​​​solid #00BFFF; margin-left: 156px; }
footer{ border: 3px ​​​​​​​solid #00FA9A; }
</style>

CSS float 속성

속성	설명
float	HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 설정함.
clear	float 속성이 적용된 후 나타나는 요소들이 더 이상 float 속성에 영향을 받지 않도록 설정함.
overflow	내용(content)의 크기가 해당 요소를 감싸고 있는 컨테이너 요소보다 클 때 어떻게 처리할지를 설정함.
overflow-x	내용(content)의 크기가 해당 요소의 수평 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.
overflow-y	내용(content)의 크기가 해당 요소의 수직 방향 박스(box)를 넘어갈 때 어떻게 처리할지를 설정함.