<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의 공식 규칙은 아니다. 사용자들 끼리 만든 것

공부기록