프론트엔드/HTML & CSS
<HTML & CSS> float 문제점 해결하기 (clearfix)
고구마광팬
2017. 6. 16. 13:04
문제사항 : 자식들이 다 float일때 부모의 높이 영역
: 아래의 .parent의 높이가 0으로 측정이 되고( 높이가 잡히지 않음) .bottom이 위로 올라온다.
< 해결방법 >
1. .parent에 높이 주기
한계 : 태그가 추가되거나 가장 긴 태그의 높이가 변했을 때의 확장성이 없다.
2. .parent에 float주기
: bottom이 아예 아래로 들어가서 위로 밀린다. (-> 또다른 문제 가져옴 ) 문제해결이라고 볼 수 없다.
3. overflow 이용하기.
* overflow : auto : 짤린 부분을 보여준다.
*overflow : hidden : 원래 가지고 있는 크기대로 잡아주지만 포지션이 생겼을 때 사라지게 한다. 짤린다. 네비게이션 메뉴 만들때 많이 발생한다.
<**clear fix **>
4) 맨 아래에 clear 인 박스 만들기
* clear : 영향을 받지 않겠다는 뜻.
* 위의 박스에 position : relative; top : 200px; 를 주었을 때.
* 박스 안보이게 하면 이렇게 깔끔하게 보인다
* 단점 : 태그를 필요할때마다 넣어줘야 한다. 모양을 만들기 위한 태그 삽입은 좋지 않음
-> 가상선택자 사용
5. clearfix 가상선택자
.parent에 가상선택자를 만들었을 때
- clearfix 가상선택자를 미리 CSS 파일 맨 위에 만들어 놓고 필요할 때마다 class에 clearfix를 추가하면서 사용한다.
( 재사용 )
* HTML의 공식 규칙은 아니다. 사용자들 끼리 만든 것