[CSS]float 속성 정의

float 은 display  나 position 과 같이

레이아웃을 잡을 때 자주 쓰이는 속성값이다.

 

<div class="main">
    <div></div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Officia eveniet ipsam perspiciatis fugiat voluptate eum ipsa consequatur numquam ullam alias. 
    Nihil optio inventore labore! Mollitia repellendus dignissimos impedit perferendis tempora.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Fuga reiciendis similique hic temporibus officia adipisci quibusdam sapiente maiores! 
    A quasi dolorem totam doloribus officia eligendi quo libero, repellat nihil tempora?
</div>

 

.main {
    border:5px solid black;
    width:auto;
    height: 800px;
 font-size: 2rem;
}
.main > div {
    width:400px;
    height:400px;
    background-color: #afafaf;
}

먼저 위의 이미지와 같이 float 값을 주지 않았을 때 모습이다. 

사진처럼 div의 display 속성값이 block 이기 때문에 한줄을 혼자 쓰고 있는 모습을 볼 수 있다.

.main {
    border:5px solid black;
    width:auto;
    height: 800px;
}
.main > div {
    width:400px;
    height:400px;
    background-color: #afafaf;
    float: left;
}

하지만 div 태그에 {float: left;} 를 주게 되면 아래의 사진처럼 바뀌는 것을 볼 수 있다.

float 와 display:inline-block; 의 차이점이 있는데

.main {
    border:5px solid black;
    width:auto;
    height: 800px;
}
.main > div {
    width:400px;
    height:400px;
    background-color: #afafaf;
    display: inline-block;
}

위의 사진처럼 display:inline-block; 를 줄 경우 float 를 주었을 때와 차이점을 확실하게 알 수 있다.

 

 

조금 더 쉽게 설명하자면 float 의 경우 사진이나 div 태그처럼

한줄을 혼자 차지하는 요소들을 좀 더 자연스럽게 배치하는데 도움을 줄 수 있다.