css float

CSS에서 float속성은 웹 페이지에서 element의 위치를 제어하는 데 사용된다. 

예를 들어, 탐색 항목 목록을 포함하는 클래스 "nav"를 가진 <div> element가 있고 페이지 오른쪽으로 이동하려고 한다고 가정하면 다음 CSS를 사용할 수 있다:

<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
[Example]
.nav {
    float: right;
}

그러면 "nav" div가 페이지 오른쪽으로 이동하고 탐색 항목이 오른쪽으로 정렬된다.

여러 element가 서로 옆에 나타나도록 컨테이너 내에 여러 element를 띄울 수도 있다.

<div class="container"> 
	<div class="nav"> 
        <ul> 
            <li><a href="#">Home</a></li> 
            <li><a href="#">About</a></li> 
        </ul> 
    </div> 
    <div class="logo"> 
    	<img src="logo.png" alt="Logo"> 
    </div> 
</div>

.nav { float: left; } 
.logo { float: right; }

이렇게 하면 nav div가 왼쪽으로 이동하고 로고 div가 오른쪽으로 이동하여 컨테이너 내에서 서로 옆에 표시된다.

element를 띄울 때 제대로 클리어링 되지 않으면 다른 element와 겹칠 수 있다. 이 문제를 해결하려면 다음 element 또는 상위 element에서 clear 속성을 사용할 수 있다.

.container::after {
    content: "";
    clear: both;
    display: table;
}

이렇게 하면 float가 클리어링되고 element가 겹치지 않는다.