css 레이아웃의 마지막인 float에 대해 공부해보겠습니다.
float은 실제로 공부할 때 시간적으로 굉장히 오래걸려 저를 힘들게 했던 부분입니다.
float은 무엇일까요? 영어 그대로 하면 떠있게 하는 것을 의미합니다.
기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽 혹은 오른쪽으로 이동하게 하게 합니다.
float을 사용하는 이유가 무엇일까요?
블록상태의 객체는 한자리를 혼자 다 차지 하기 때문에 다른 객체와 나란히 놓을 수 없습니다. 그럴때 사용하기 위해서 쓰인답니다.
1) 바깥 div(.wecode-box) 마지막에 아무태그나 넣고 clear 속성을 적용
단, 사용할 시 HTML코드를 더 입력해야하는 부담감
2) 바깥 div(.wecode-box)에 overflow: hidden;
주로 많이 사용하는 방법입니다.
3)바깥 div(.wecode-box)를 float
문제발생:float이 되어버려 block요소의 성질이 없어지게 된다. width를 100% 추가해야한다.