css) float, clear

float

element를 normal flow(css가 적용안됬을때, 디폴트)를 벗어나 박스를 왼쪽이나 오른쪽에 위치하도록함.

 

index.html

web

 

 

이 기본 상태에서 css로 img태그에 float:left를 적용하면

이렇게 img 박스가 왼쪽에 위치하게됨.

<p> 는 block element이기 때문에 <img>다음에 개행하고 시작되어야 함에도 불구하고 <img>의 오른쪽에 위치하게된다.

 

---

 

clear

float를 이용해 박스가 normal flow에서 벗어난 상태를 해제시킴.

(정확히는 float의 영향을 받지 않도록함)

 

ex)

// 오른쪽 float된 요소를 해제 

clear: right;

 

이미지에 float:left가 적용되어 있지만

clear:left 해줌으로서 되돌림.

 

---

하나의 <img>는 float:right, 다른 하나의 <img>는 float:left 

<p>는 clear:right 일때:

 

index.html

 

 

right는 clear되어서 <p>가 개행되서 나타나지만

left는 float된 상태여서 개행되지 않음.

 

 

요소가 parent보다 커지면