css정리5 - 포지셔닝 / float

static - 포지셔닝이 안 된 요소

relative / fixed / absolute - 포지셔닝이 된 요소

- realative : 원래 있던 요소 기준

- fixed : 브라우저 기준

- absolute : 가장 가까운 포지셔닝이 된 조상 요소가 기준이 됨

 -> 예) <div id=""></div>

 

<float>

float 요소의 경우 

-> 인라인요소와 겹쳐질 수 없음. 예) <p> <a>태그 등

 

<multi floats>

float가 여러개 => 그리드 레이아웃을 만들 수 있음.

 

<clear>

css에서 요소에 clear: ~ 를 하면 

요소 방향쪽의 float 가 못뜨게 할 수 있음.

clear는 float는 문제를 해결할 수 있음.

 

보통 <div class="clearfix"></div> 를 이용해서

css에서 .clearfix{

 clear: left; 

}

이런식으로 클리어 하고 싶은 div 옆에 추가해줌