CSS clear property

레이어의 레이아웃을 위해 float를 사용하여 작업을 하게 됩니다.
float:left, float:right가 대표적으로 쓰이는데요.

요즘 같이 반응형웹이다 해서 복잡한 레이어 구성에서 종종 float을 쓴 하위의 레이어나 테이블이 뜻하지 않게 영향을 받게 됩니다. 이럴 때 하위의 레이어나 테이블에서 float 설정을 초기화하기 위해 사용되는 것이 clear 속성입니다.


No floating elements allowed on the left or the right side of a specified paragraph:

img
{
    float:left;
}
p.clear
{
    clear:both;
}

<img src="logocss.gif" width="95" height="84" />
<p>이 영역은 img의 float:left 때문에 이미지 옆에 표시된다.</p>
<p class="clear">이 영역은 img의 float:left 를 초기화했으므로 이미지 밑에 표시된다.</p>


Syntax
clear: none | left | right | both | initial | inherit;

none : Default. Allows floating elements on both sides
left  : No floating elements allowed on the left side
right : No floating elements allowed on the right side
both : No floating elements allowed on either the left or the right side
initial : Sets this property to its default value.
inherit : Inherits this property from its parent element.

참조 : http://www.w3schools.com/cssref/pr_class_clear.asp