CSS float
CSS float float은 정렬방법중 하나이다. float은 float만의 특성이 있기 때문에 조심해서 사용해야 한다. float을 사용하면 더 이상 width가 100%가 아니다. 왜냐하면 float은 이름대로 행동한다. 떠있다. 하지만 겹치는것은 아니다.?! 자세히 말하자면 컨텐츠는 겹치지 않으나 블록 범위는 겹쳐진다라고 하는게 맞는것같다. div태그가 차례로 있을때 맨처음 div태그에 float 속성을 작성하면 inline속성과 같이 컨텐츠의 크기만큼만 부피를 차지하게된다.(추가적으로 높이와 너비도 지정해 줄 수 있다.) 형제 태그에 있던 텍스트나 컨텐츠들이 float속성이 적용된 컨텐츠를 둘러싸게된다. 이러한 속성으로 float은 글과 함께 이미지를 삽입할 때 많이 사용한다. img태그의 경우 기본적으로 block level속성을 가지고있는데 block level 속성으로 인해서 옆에 공백이 생기고 글들이 밑으로 내려가는 문제가 발생한다. 이때 float을 사용하여 이미지의 위치를 지정하면서 inline level과 같은 속성효과가 발생되어 삽입된 image옆에 글들을 위치 시킬 수 있다. 만약에 float속성을 사용했지만 형제태그(sibling)가 컨텐츠를 둘러싸는것을 원치 않다면 둘러싸이는 컨텐츠의 위치에따라 clear: left; 또는 clear:right; 또는 clear:both; 해주면 된다. 그러면 float속성을 가진 컨텐츠의 밑으로 이동한다. 그리고 한가지 float의 문제점은 부모태그가 float속성의 자식태그를 인식하지 못한다는것이다. 따라서 높이가 0이 되어버리는 문제가 발생한다. 즉 float의 크기가 어떻하든 아무것도 없다고 인식하여 css효과가 적용이 안된다. 이러한 문제로인해 배경색이 적용이 안되는 문제가 발생하기도 한다. float속성의 자식을 인식하게 하려면 자식태그를 감싸고있는 부모태그에 overflow: auto나 overflow:hidden을 주어...