CSS Reference

CSS float

float

float 속성은 block구조 요소 좌우에 다른 요소를 배치할 수 있게 하며 주로 레이아웃을 만들 때 사용한다.

float의 값

left: 요소가 자신의 포함 블록의 좌측에 위치해야 함을 나타내는 키워드
right: 요소가 자신의 포함 블록의 우측에 위치해야 함을 나타내는 키워드
none: 요소가 부동하지 않아야 함을 나타내는 키워드
inline-start: 요소가 자신의 포함 블록의 시작쪽에 위치해야 함을 나타내는 키워드
inline-end: 요소가 자신의 포함 블록의 끝쪽에 위치해야 함을 나타내는 키워드

float의 버그

float의 버그로는 특정 float된 요소의 부모 요소가 자식요소인 float된 요소의 높이(height) 값을 인지하지 못해 영역 깨짐 현상이 나타난다.

float 버그의 해제 방법

1. 부모 요소에 강제로 높이 값 부여: 근본적인 해결 X, 반응형 시 자동 높이 값 설정 불가
2. 부모 요소에 float부여: 자식 요소의 버그는 해결 되지만 부모의 레이아웃이 깨짐(가운데 배치X)
3. 부모 요소에 강제로 overflow: hidden 적용: 해당 요소 안의 콘텐츠를 박스 외부로 표현해 줄 수 없음(살짝 삐져나가는 디자인X)
4. 부모 요소에 강제로 overflow: auto 적용: 특정 브라우저에서 스크롤 바가 표시됨
5. float된 요소의 다음에 나오는 태그에 clear: both 적용: clear: both가 적용된 요소에는 margin-top적용X
6. float된 부모 요소에 가상 요소 선택자를 만들고 clear: both 적용: 최고의 float 버그 해제방법

가상 요소 선택자

float된 요소의 부모 요소에 클래스로 가상 요소 선택자(clearfix)를 적용하고 CSS 속성을 설정한다

CSS 속성 설정

    .clearfix {
        zoom: 1; /*ie 6,7,8*/
    }
    .clearfix::before,
    .clearfix::after {
        content: ""; 
        display: block;
    }
    .clearfix::after {
        clear: both;
    }