CSS3 float left로 인한 영역 깨짐 현상 처리 방법 및 last-child 사용법

CSS3에서 floa:left로 레이아웃을 잡게 되었을 때, 영역 깨짐 현상이 발생을 합니다.

이 에러를 잡기 위한 방법 4가지입니다.

1. 깨지는 영역에 float:left를 사용한다.

- 모는 박스에 float:left를 사용해야 합니다.

 

2. clear:both를 사용한다.

- 어떤 영역이 깨졌는지 알 수가 없어서 추적 관리가 힘듭니다.

 

3. float를 사용한 상위 박스에 overflow:hidden를 사용한다.

- 현재 가장 많이 사용하는 방법입니다.

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

 

4. clearfix를 사용한다.

last-child 사용법

div:last-child : div 자식 노드 중에서 마지막 노드만 CSS를 적용합니다.

예를 들어 div 태그가 3개가 있을 때 전체를 40%로 놓게 되면 120%가 되어 레이아웃이 깨집니다.

이때 마지막 노드에만 20%를 적용함으로써 100%가 되게 처리를 할 수 있습니다.

.nav > div { width : 40% }
.nav > div:last-child { width : 20% }

CSS3 float left로 인한 영역 깨짐 현상 처리 방법 및 last-child 사용법