CSS Reference

CSS float

float

float란?

float 속성은 블록요소의 정렬 상태를 설정합니다.

문법

float: none | left | right

속성

속성값	설명
inherit	부모 요소에서 상속
none	float의 성질을 적용하지 않습니다.
left	블록요소를 왼쪽으로 정렬합니다.
right	블록요소를 오른쪽으로 정렬합니다.

예제

<style>
    .float-container{
        width: 320px;
        border: 2px solid #09c;
    }
    .float-container img{
        float: left;
        margin: 5px;
        padding: 5px;
        border: 2px solid #90C;
    }
</style>

float 속성 사용시 영역이 깨지는 버그

float 시 해당 객체는 높이, 넓이 값을 잃어버립니다.
그렇기때문에 .clearfix라는 클래스를 만들어 쓰는 것이 일반적입니다.

clearfix 설정방법
/*float_clear*/ 
.clearfix {*zoom: 1} 

.clearfix:before, .clearfix:after {display:table; content:""; line-height:0} 

.clearfix:after {clear:both}