TIL -04. CSS 레이아웃(2): float

css 레이아웃의 마지막인 float에 대해 공부해보겠습니다.

float은 실제로 공부할 때 시간적으로 굉장히 오래걸려 저를 힘들게 했던 부분입니다.

1. float 이해하기

float은 무엇일까요? 영어 그대로 하면 떠있게 하는 것을 의미합니다.
기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽 혹은 오른쪽으로 이동하게 하게 합니다.

• float속성을 사용할 때 요소의 위치가 고정되면 안 되기 때문에 position속성의 absolute를 사용을 금합니다.
• float속성을 사용하지 않으면 요소들이 수직으로 출력
• float:left 왼쪽부터 정렬
  float:right 오른쪽부터 정렬
  float:both 양쪽 정렬

float을 사용하는 이유가 무엇일까요?
블록상태의 객체는 한자리를 혼자 다 차지 하기 때문에 다른 객체와 나란히 놓을 수 없습니다. 그럴때 사용하기 위해서 쓰인답니다.

2. float을 해결하는 방법 :3가지
   해결하기 위해서는 clear라는 속성이 꼭 필요합니다.

1) 바깥 div(.wecode-box) 마지막에 아무태그나 넣고 clear 속성을 적용
단, 사용할 시 HTML코드를 더 입력해야하는 부담감

2) 바깥 div(.wecode-box)에 overflow: hidden;
주로 많이 사용하는 방법입니다.

3)바깥 div(.wecode-box)를 float
문제발생:float이 되어버려 block요소의 성질이 없어지게 된다. width를 100% 추가해야한다.