라벨이 float인 게시물 표시

[CSS] float과 clear:both 속성

이미지
float 속성 float 속성을 사용하면 해당 속성이 적용된 컨텐츠가 블록 내부의 좌측 또는 우측에 붙게되고 다른 컨텐츠들이 float 속성이 적용된 컨텐츠 주변을 감싸게 된다. 기본형: float: left l right l none left -> 해당 요소를 문서의 왼쪽에 배치한다. right -> 해당 요소를 문서의 오른쪽에 배치한다. none -> 좌우 어느쪽으로도 배치하지 않는다. float을 사용하면 아래의 이미지와 같이 float 속성이 적용된 요소의 그 주변을 다른 요소가 감싸게 된다. clear 속성(float 속성 해제하기) float 속성을 사용하면 float 속성을 적용한 요소 다음에 오는 요소들에도 속성이 전달된다. 따라서 float 속성이 적용된 컨텐츠 다음에 오는 컨텐츠들이 감싸는것을 원치 않으면 clear 속성을 사용해서 속성이 적용되지 않도록 할 수 있다. float: left; 였다면 clear:left; 사용하여 무력화 float: right; 였다면 clear:right; 사용하여 무력화 위처럼 사용하면 float 속성을 무효화 시킬 수 있다. 이외에도 float 속성 값과 상관없이 무조건 기본상태로 되돌리고 싶다면 clear: both; 속성을 사용하면 된다. 예시) <! DOCTYPE html > < html lang = "ko" > < head > < meta charset = "utf-8" /> < title > float & clear </ title > < style > div { padding : 20px ; margin : 10px ; } .box1 { background : #ffd800 ; float : left ; } .box2

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을 주어여 부모 태그가 정상적으로 자식 태