Float의 영역 깨짐 현상

Float

Float 를 사용하여 레이아웃을 짜게되면 영역이 깨지는 현상이 발생합니다. 그 이유는 Height값이 사라지기 때문인데요. 이를 방지하기 위한 방법들이 있습니다.

깨지는 영역에 똑같이 float : left를 사용

이 방법을 사용하면 모든 박스에 float를 사용해야 합니다. 그렇게되면 구조가 복잡해지고 어디에 float를 주어야 할지 알기가 어려워집니다.

깨지는 영역에 Clear : both 를 사용

깨지는 위치는 잡을 수 있지만 구조가 복잡할 때는 어떤 영역이 문제인지 찾기가 어렵습니다.

Float를 사용한 상위 박스에 Overflow : hidden을 사용

2단 메뉴를 사용 시 사용할 수 없습니다.

부모요소에 Display : inline-block을 사용

박스의 성질이 달라져서 이전에 작성한 태그의 결과물이 달라질 수도 있습니다.

Clearfix를 만들어서 class로 사용하기

Clearfix라는 가상의 영역 속성을 만들어서 사용합니다. 클리어픽스의 사용은 다음과 같습니다.

.clearfix {
    zoom: 1;
}
.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
}
.clearfix::after {
    clear: both;
}

요소에 직접적으로 클래스를 부여하지는 않지만 상태에 따라서 클래스를 적용한 것처럼 만들 수 있습니다. a:hover 여기서 :hover 이건 가상 선택자입니다. 그런데 .icon::after 여기서 ::after이건 가상 요소입니다. 가상 요소를 쓸 때 :: 이렇게 쓰는 경우도 있고 : 이렇게 쓰는 경우도 있는데 원칙은 ::(콜론 두개) 입니다.

before은 해당요소의 시작 전에 content 속성을 부여합니다.
atfer 는 해당요소가 끝난 다음 content 속성을 부여합니다.
둘의 공통점은 content="" 를 가지고 있어야 합니다. 콘탠츠의 내용에는 문자열, 이미지등 다양한 타입을 포함할 수 있습니다.
float을 적용한 요소의 부모 요소에 빈 컨텐츠를 넣고 float를 초기화(clear: both)를 해줍니다. 이때 내용이 빈 콘텐츠에 block 속성을 주어야 합니다.