[CSS] Float으로 인한 레이아웃 깨짐 해결

1) 태그에 float 속성값을 부여하면 이전의 display 속성이 어떤 것이던 block이 된다. (block처럼 weight, height, border(top,bottom),padding(top,bottom), margin(top,bottom) 모든 block 속성 부여 가능)

2) 그러나 block이 지닌 특징인 margin auto값은 적용이 안되어 별도의 속성을 조정하지 않고 위치만 잡게된다면 한 줄로 흐르는 inline태그처럼 취급된다. 

3) float이 적용된 개체는 부모 태그에 속한 자식 태그들과 레이어가 분리된다. - 그래서 개체가 겹칠수도.. 

4) 또 이외의 개체들은 float으로 배치된 개체를 알아보는데, 

부모 태그 안의 자식 태그들 (정사각형)에 float과 margin : 0 auto를 주어 위치를 일렬로 중앙 정렬해준 후 부모 태그의 형제 태그로 검은 박스와 켄텐츠를 작성했을 때, 형제 태그 안의 컨텐츠가 float을 인지하여 레이아웃이 망가지는 것을 볼 수 있다. float로 인한 레이아웃 깨짐을 해결하는 방법은 3가지가 있다.

 

1) 부모 태그의 CSS에 overflow : hidden를 작성한다.

.parent {
    overflow: hidden;
    margin:0 auto;
    width: 300px;
    background-color: whitesmoke;
}

 

2) HTML에 clear 속성을 가진 임의의 요소를 별도로 생성한다.

새로운 임의의 요소를 만들어 clear(clear:left, clear:right, clear:both) 속성을 주면 float 속성이 제거된다. 그러나 스타일 이슈 때문에 의미 없는 개체를 만들어 마크업을 더럽히는 것은 권장되지 않는 방법이다.

<div class="pseudo"> {
    clear:left;
}
</div>

 

3) CSS로 clear 속성을 가진 Pseudo Element를 만들어 해결한다. (권장되는 방법)

HTML에는 존재하지 않지만 CSS에만 존재하는 가상 요소에 clear 속성을 부여해준다. CSS로 만드는 각 개체당 두 개씩 만들 수 있다. 

.parent::after { content: "";
    display: block; /* clear는 display가 block여야 적용됨 */
    clear: left;
    }