CSS float 속성을 사용하면이 텍스트의 오른쪽에있는 이미지에서 볼 수 있듯이 텍스트 오른쪽에 이미지를 떠올리게 할 수 있습니다. 웹 페이지에서이 작업을 수행하려면 다음 단계를 따르십시오.

이 예제에서는 외부 CSS 파일을 사용합니다. 외부 CSS 파일을 사용하면 CSS 파일에 대한 링크가 포함 된 모든 페이지에서 부동 이미지를 만들 수 있습니다. 또한 외부 CSS 파일을 사용하면 나중에 조정할 수있는 설정을 쉽게 변경할 수 있습니다.

1. CSS 파일을 만듭니다. 웹 페이지에 대한 CSS 파일이 이미있는 경우 CSS 파일을 편집하고 다음 코드를 추가하십시오.

2. 다음 코드를 CSS 파일에 추가하십시오.

 .floatRight {float : right; margin-left : 20px} 

팁 : float : left를 추가하면 이미지가 텍스트의 왼쪽에 떠있게됩니다.

오른쪽에 두 개 이상의 이미지가 떠있게하려면 다음 줄을 CSS 파일에 추가하십시오.

 .floatRightClear {float : right; clear : right; margin-left : 20px} 

3. 위 코드를 작성한 후 CSS 파일을 저장하고 아래 예제와 유사한 코드를 사용하여 각 HTML 페이지에서 호출하십시오. 이 예에서는 CSS 파일 style.css의 이름을 지정했습니다.

4. 마지막으로, 컨테이너의 오른쪽에 떠있는 모든 이미지에를 추가하십시오.