CSS 입문 | CSS 위치 속성 | 플로트 (float)

Tags:

CSS float 속성

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

float 속성

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

다음 예제는 이미지와 글자를 함께 출력하는 예제이다.

<style>
    img { float: left; margin-right: 20px; }
</style>

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 속성

float 속성이 적용된 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>



최종 수정 : 2021-08-27