CSS float / clear

float

이미지 주변을 텍스트로 감싸기 위해 만들어진 프로퍼티
그림을 텍스트로부터 띄워서 정렬할 때 사용하거나 각 객체를 오른쪽, 왼쪽으로 배치할 때 사용

속성값 : none, left, right

float : left

img{
	float:left;
}

clear(float 제거하기)

그림 주위로 텍스트가 둘러싸지 않게 설정
블록의 크기에 영향을 미치지않는 float의 특징을 제거해 float의 높이만큼 늘어나도록 함.
단, float의 속성을 갖고있는 블록안에서 clear가 사용돼야함.
속성값 : left, right, both

float : left, clear : left

img{
	float:left;
}
p{
	clear:left;
}

clear : both

img:first-child{
	float:left;
}
img:last-child{
	float:right;
p{
	clear:both;
}

+) overflow : hidden

-일정영역을 벗어난 부분을 보이지 않게하는 스타일 속성

노란박스를 float속성을 가진 블록 밖에 위치시키기위해 float속성을 가진 블록(div로 설정)에 overflow:hidden 설정

노란박스가 처음에 위치한 영역이 hidden되어 아래위치로 이동함.