float 한 뒤에는 꼭 clear:both;
초보 프론트엔드 개발자 멘붕 이야기 04
뭐든 기초가 중요하다.
기초가 부실하면 공든 탑도 쉽게 무너진다.
이 일을 시작하게 되면서 다시 예전에 공부한 책을 모두 꺼냈다. 분명 열심히 본 책들인데...
다시 펼치니 낯설다.
이런 내용이 있었나? 인간은 망각의 동물이라지만, 그래서 때론 삶을 덜 힘들게 해주기도 하지만, 이렇게 열심히 공부한 걸 몽땅 망각할 때면 참;;;
분명 내 뇌 어느 곳 깊숙히 아직 흔적이 남아있을거라는 작은 희망을 가져보지만...역시 새롭다.
멘붕의 역사를 쓰고 있는 지금 뭐든 쏙쏙 빠르게 흡수하고 싶어 열심히 책을 뒤적어 보지만, 검은건 글자 맞는데...뭔 소리냐??
기초가 부실해서 아니 귀찮아서 그냥 지나쳤다 매번 뒤통수 맡는 속성이 있으니... 그 아인 바로 clear:both다.
이걸 안 적었다고 태그에 속성이 안먹을 줄이야
처음엔 도대체 왜 태그에 속성이 전혀 먹질 않는지를 몰랐는데...설마하고 확인했더니 또또 깜빡한거다. 배울땐 반드시 float 한 다음에는 해제 해주는 clear:both를 적어야 한다고 했지만, 안 적어도 별문제 없기에 건너뛰었는데 그게 꼭 중간에 탈이 나는거다.
그렇게 몇번의 멘붕을 겪고 나서는 다시 한번 더 체크하는 편이다. 뭐 습관이 덜 되서 가끔 깜빡할때도 있지만...
float 한 뒤에는 꼭 clear:both;
<공부하자>
float
- 박스를 좌측이나 우측으로 붙이고 아래 내용이 그 주변을 흐르게 하는 속성
- float한 박스에 width값을 주어야 모든 구형 브라우저에서까지도 동일한 결과로 표현 된다.
clear:both
- float한 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치하도록 하는 속성
- 이 요소는 블록이어야 한다.
※ float을 해제하지 않으면 얼핏 보기에 정상적인 것 같아도 float된 박스를 감싸는 박스에 배경이나 테두리 속성이 실행되지 않는다.
이 경우 clear:both를 부여할 가짜 요소를 만들어 줘야 한다. :after 선택자를 이용해서 container 안에 실제로 없는 마지막 박스를 만들고 내용은 비워둔다. 거기에 clear:both를 해준다.
