[css]초보자를 위한 float:left,right 간단 정리!

float는 세로로 나열되어 있는 블록을 가로로 배치할 때 사용된다.

float을 사용할 때는 '꼭' 가로 사이즈를 줘야 한다.

세로로 나열된 블로마다 float:left를 적용하면 해당 블록들은 모두 왼쪽으로 차례로 나열된다.

반대로 float:right을 적용하면 해당 블록들은 오른쪽으로 나열된다.

이때 블록 아래의 블록이 딸려서 올라오는 오류가 생기기도 한다.

이를 방지하기 위해 딸려오지 않도록 아래의 해당 블록에 'clear:both'을 적용해야 한다.

"<p>태그는 블록 레벨 요소로 한 라인을 다 차지한다.

하지만 해당 예에서는 세 개의 <p>태그에 float:left를 적용하여 왼쪽으로 차례로 나열되게 했다.

'이미지 세 장'이라는 <h2>태그는 블록 레벨 요소이기 때문에 딸려오지 않는다."

이 예에서는 img에 float:left를 주게 되면서 <p>가 위로 딸려오게 되었다.

<p>태그의 텍스트는 width에 맞추어 아래로 나열되었다.

여기에 img와 <p>태그에 margin을 각각 적용해 임의로 간격을 주었다.