data/tip
[팁] float 속성 해결은 clear:both
2016. 11. 23.

이번 스킨은 갤러리형 목록이라 가로 나열을 위해 float 값을 썼는데

하단에 있는 페이징 박스에도 그 속성이 적용돼서 모양이 이상해졌다.

float는 위치를 강제적으로 만드는 속성이다보니 하단까지도 영향을 미친 것이다.

어떻게 해결해야 하나 고민하다가 다양한 시도를 해봤지만 실패.

내가 그나마 해결을 했던건 overflow:hidden 인데 float를 해제할 수 있지만 해당 내용의 높이를 가져오기 때문에 여백이 많이 생긴다.


http://naradesign.net/wp/2008/05/27/144

그러다가 다행히 검색을 통해 위 링크에서 해결할 수 있는 방법을 찾았다.


Before - 목록과 하단이 겹침


After - 정상적으로 나열


해결방법은 float 값이 사용된 이후의 div에 clear:both 를 추가하면 된다.

그동안 이 부분에 대해서 알쏭달쏭했는데 드디어 해결 완료.

이런거 배운적이 없는 알못이라 설명이나 뜻이 정확하지 않으니 궁금한 분들은 더 검색해보시길.