레이아웃 (1) 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;
    }