float:left속성으로 레이아웃이 깨질 때

float:left로 컨텐츠 정렬을 해야할 때가 있는데,

이렇게 되면 다음에 올 컨텐츠들이 옆에 붙거나 레이아웃이 깨진다.

게다가 float:left속성을 준 부모의 height값도 인식을 하지 못해서

영역이 잡히지 않는다.

 

이 경우 부모(예를들면 div)에 overflow:hidden 속성을 넣어주면

다음컨텐츠도 정렬이 잘 된다.

 

 

하지만 overflow속성을 다르게 줘야 할 경우가 있는데 이경우엔

 

after속성을 사용해서

 

div.부모클래스:after{

content:""; clear:both; display: block;

}

이렇게 css를 넣어주면 된다.

단, after속성은 css3부터 추가된 사항이므로

ie 8이하에선 작동하지 않음.