CSS] float, clear

 

float 사용하기 

사진을 왼쪽으로 글씨를 오른쪽으로 위치하고 싶을 때 

table을 만들지 않고, float로 할 수 있다.

변하기 전- 이미지는 위에 제목과 설명은 아래에

 

 

css에서 해당 이미지에 float: left;로 줘서

이미지를 왼쪽으로 가게 하고, 오른쪽 마진을 30px 만큼 주었다.

css

결과물 - 제목과 설명 모두 옆으로 이동

 

 

 

 

clear 사용하기 

 

이미지 옆에 타이틀은 놔두고, 내용은 밑으로 보낼 때

밑에 보낼 내용을 html에서 클래스로 지정해주고 

css에서 그 클래스에 clear: left; 를 준다.

clear는 float를 무효화한다. 

html

css

결과물