CSS float

float

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

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 solild #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)를 넘어갈 때 어떻게 처리할지를 설정함.