[CSS] 문서의 흐름 (float)

웹 요소들이 화면에 표시되는 순서는 기본적으로 html문서 내에서 태그가 쓰여진 순서를 따른다.
하지만 이번 페이지에서 공부할 float는 html문서의 흐름을 무시하고 엘리먼트를 원하는 방식으로 '띄울' 수 있다. float속성은 문서의 흐름에서 제외시킨 채로 부모 요소 혹은 루트 요소를 기준으로 위치를 변경한다.

//부모 요소
.container {
	height: 400px;
}
example1 {
	float: none;
}

example2 {
	float: top;
}

example3 {
	float: left;
}

example4 {
	float: right;
}

example5 {
	float: bottom;
}

• none: float가 없는 상태. 기존의 html 문서의 흐름을 따르는 상태
• top, left, right, bottom: 각 명명하는 위치에서 입력하는 수치만큼 떨어트린다.

주의점. float을 사용하면 기존의 흐름을 따르는 타 엘리먼트의 정렬을 무너뜨릴 수 있다.
이것을 방지하기 위해서 타 엘리먼트에 clear속성을 추가하여 float의 영향에서 벗어날 수 있다.

clear의 여러 속성

• both: float 엘리먼트가 양쪽에 있을 경우
• left, right: float 요소가 좌우 중 한쪽에 있을 경우

코드 예시

another {
	clear: both;
}

float을 적용하지 않는 상태

float을 왼쪽에 적용한 상태

float을 오른쪽에 적용한 상태