float

* float 이란

- 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할것인가에 대한 속성.

 

 

- 속성 간단 정리

종류	left	right	none
너비	최대한 줄어든다	최대한 줄어든다	유지된다
본질	최대한 위로 올라간 후 좌측으로 붙는다	최대한 위로 올라간 후 우측으로 붙는다	-
block	무시된다	무시된다	무시되지 않는다
inline , inline-block	무시되지 않는다	무시되지 않는다	무시되지 않는다

 

- float의 기본값은 none 이며 최대한 공백없이 너비를 줄여 위로 올라갈 수 있는만큼 올려준다.

  display : inline-block 과 유사하다고 볼수도 있지만 태그를 정렬하였을 때 공백이 있고(inline-block) , 없고(float)의 차이가 존재.

 

 

1) display : inline-block 으로 정렬되었을 때

 

공백으로 인해 줄바꿈이 되었다.

2) display : block 으로 정렬되었을 때

 

공백은 사라졌으나 block요소의 속성으로 인해 태그 하나당 한줄을 사용하게 되었다.

3) float : left 로 정렬되었을 때

 

공백 없이 딱 맞는 사이즈로 정렬되었으나 div가 nav를 벗어났다.

 

 

※ float을 사용했을 때는 부작용이 생긴다.

  ㄴ 부모태그의 자식들이 전부 float 일때 부모태그는 자식태그를 인식하지못한다. 즉 자식이 없다고 생각하기 때문에 높이가 0이되어 아래 의 형제태그들이 영역을 침범하게된다. 

 

- 해결책 : 막내 추가하기

  ㄴ float 요소를 가지고있는 부모는 항상 막내를 추가해야 하며 막내태그는 display:block 요소와 clear:both 요소를 꼭 가지고 있어야함. (참고 : section은 기본적으로 block속성)

 

해결책 1 : html에 직접 막내태그 추가하기

해결책 2 : float 걸어준 태그의 부모태그에 after 걸어주기

 

 * clear : both - 자신 이전에 나온 요소들은 자신 위에 둔다.

                     (하위요소가 디자인을 해치지 않으면서 상위 요소들을 침범하지 못하게 해줌.)