16. float _ 요소를 띄워 정렬

float란 단어 뜻 그대로 띄우는 태그입니다. 태그들이 직관적이라 참 좋네요.
레이아웃을 잡을때 가장 많이 쓰이는 태그 중 하나입니다.

한 영역에 float를 주면 그 뒤에 따라오는 영역들이 넓이가 허용하는 안에서 옆으로 올라 옵니다.
마치 물에 물체들이 둥둥 뜨는 것처럼요. 줄바꿈이 일어나는 block태그를 옆으로 배치시킬때 사용합니다.
기본형은 아래와 같습니다.

<div class="box_ex">float</div>
<div class="box_ex">float</div>
 

CSS

<style>
	div.box_ex {width:50px;height:50px;float:left;background:tomato;margin:10px;}
</style>
 

float

float

left

왼쪽을 기준으로 차례대로 둥둥 띄워 정렬합니다.
가장 위의 영역부터 왼쪽부터 차례대로 늘어섭니다.

<div class="box_float">box 1</div>
<div class="box_float">box 2</div>
<div class="box_float">box 3</div>
 

CSS

<style>
	div.box_float {width:50px;height:50px;float:left;background:springgreen;margin:10px;}
</style>
 

box 1

box 2

box 3

right

left와는 반대로 오른쪽부터 차례대로 정렬합니다.
가장 첫번째 float영역이 가장 오른쪽에 오게 됩니다.

<div class="box_float2">box 1</div>
<div class="box_float2">box 2</div>
<div class="box_float2">box 3</div>
 

CSS

<style>
	div.box_float2 {width:50px;height:50px;float:right;background:tomato;margin:10px;}
</style>
 

box 1

box 2

box 3

clear 태그

float를 사용해 내 뒤에 있는 애들을 다 방방 띄워 놨습니다.
띄웠으면 그것을 끝내야 할때도 있지요. 더이상 요소들이 떠다니는걸 원하지 않을때 입니다.
그럴때 사용하는 태그가 clear태그입니다.
clear는 3가지 value값이 있는데 left, right, both입니다.
left는 float:left를 더이상 사용하지 않는걸 의미하고
right는 float:right를 더이상 사용하지 않는다는 겁니다.
both는 말그대로 둘다 안써! 입니다. 편의상 간단하게 both로 통일을 많이 합니다.

<ul class="clear_ex">
	<li class="float">float</li>
	<li class="float">float</li>
	<li class="clear">float clear!!</li>
</ul>

CSS

<style>
	ul.clear_ex li {width:50px;height:50px;background:skyblue;margin:10px;list-style:none;}
	li.float {float:left;}
	li.clear {clear:both;}
</style>
 

• float
• float
• float clear!!

* 개인적인 공부를 정리하는 블로그입니다.