CSS float 영역 깨짐 현상

float 속성 영역 깨짐 현상

CSS 3에서 float:left값으로 레이아웃을 설정할때 영역 깨짐(height값이 사라지는 현상)

1. 깨지는 영역에도 float:left값 추가

모든 박스에 float:left 값을 사용해야하며 구조가 복잡해지면 어떤 부분에 추가해야 될지 모르기 때문에 비추천

2. 깨지는 영역에 Clear:both값 추가

위치를 잡을 수 있지만 구조가 복잡해질 경우 찾기 어렵다

3. float 속성을 사용한 상위 요소에 overflow:hidden값 사용

2단 메뉴 사용시에는 사용할 수 없다

    .nav { overflow: hidden; }
    .nav > div{ float: left; }

clearfix 사용

가상 선택자 ::after를 사용한다, 요소들의 부모 컨테이너에 ::after를 추가한다

    clearfix::after {
        content:''; 
        display:block; 
        clear:both;
    }