TIL.float

float

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

float속성

float: left; 요소가 자신의 포함블록의 좌측에 부동해야 함을 나태는 키워드이다.

float: right; 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드이다.

float: none; 요소가 부동하지 않아야 함을 나타내는 키워드이다.

clear 속성

clear속성은 float속성이 적용된 이후 나타나는 요소들의 동작을 조절해준다. 컨테이너 요소에 float속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어진다.

<style>
	.left{ width: 150px; height: 50px; float: left; }
    	.right{ width: 150px; height: 50px; float: right; }
</style>      

float속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear속성을 사용하여, 이후에 등장하는 요소들이 더는 float속성에 영향을 받지않도록 설정해야한다.

<style>
	.left{ width: 150px; height: 50px; float: left; }
    	.right{ width: 150px; height: 50px; float: right; }
        p { clear: both; }
</style>