[CSS] float 속성

 

 

float 속성은 요소를 특정 위치에 지정하고자 할 때 사용합니다.

이 속성을 적용할 경우, 이 다음에 오는 요소는 float 속성이 적용된 요소 주변으로 흐릅니다.

 

float: none;  /* 기본값, 요소가 그 위치 그대로 표시됨 */
float: left;  /* 요소가 왼쪽에 떠있게 함 */
float: right;  /* 요소가 오른쪽에 떠있게 함 */
float: inherit;  /* 부모의 속성 값을 상속 받음 */

 

 

 

float 속성을 가진 요소 뒤에 오는 요소는 float 요소의 주변으로 배치되므로, 이를 방지하기 위해서 clear 속성을 사용할 수 있습니다.

 

clear: none;  /* 기본값, 양쪽 float 속성을 허용함 */
clear: left;  /* 왼쪽 float 속성을 해제함 */
clear: right;  /* 오른쪽 float 속성을 해제함 */
clear: both;  /* 양쪽 float 속성을 해제함 */
clear: inherit;  /* 부모의 속성 값을 상속 받음 */

 

 

 

 

float 속성을 이용하면 아래와 같이 텍스트 내에 이미지의 위치를 지정해줄 수 있습니다.

 

<img src="img.jpg" alt="" />
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vitae ante quis diam ultrices lobortis eu sed ipsum. Sed dui risus, lobortis nec vulputate in, pellentesque at nisi. Quisque vulputate in dui vel pharetra. Morbi iaculis aliquet lacus vel rutrum. Curabitur quis lorem malesuada tortor dictum varius. Vestibulum arcu est, dignissim ac malesuada vel, dictum fermentum tortor. Nullam ut libero leo. Morbi posuere diam ex, sed facilisis erat tempus et. Cras mattis cursus tristique. Aliquam erat volutpat.</span>

 

 

float: left

 

img { float: left; }

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vitae ante quis diam ultrices lobortis eu sed ipsum. Sed dui risus, lobortis nec vulputate in, pellentesque at nisi. Quisque vulputate in dui vel pharetra. Morbi iaculis aliquet lacus vel rutrum. Curabitur quis lorem malesuada tortor dictum varius. Vestibulum arcu est, dignissim ac malesuada vel, dictum fermentum tortor. Nullam ut libero leo. Morbi posuere diam ex, sed facilisis erat tempus et. Cras mattis cursus tristique. Aliquam erat volutpat.

 

 

float: right

 

img { float: right; }

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vitae ante quis diam ultrices lobortis eu sed ipsum. Sed dui risus, lobortis nec vulputate in, pellentesque at nisi. Quisque vulputate in dui vel pharetra. Morbi iaculis aliquet lacus vel rutrum. Curabitur quis lorem malesuada tortor dictum varius. Vestibulum arcu est, dignissim ac malesuada vel, dictum fermentum tortor. Nullam ut libero leo. Morbi posuere diam ex, sed facilisis erat tempus et. Cras mattis cursus tristique. Aliquam erat volutpat.

 

 

float: none

 

img { float: none; }

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vitae ante quis diam ultrices lobortis eu sed ipsum. Sed dui risus, lobortis nec vulputate in, pellentesque at nisi. Quisque vulputate in dui vel pharetra. Morbi iaculis aliquet lacus vel rutrum. Curabitur quis lorem malesuada tortor dictum varius. Vestibulum arcu est, dignissim ac malesuada vel, dictum fermentum tortor. Nullam ut libero leo. Morbi posuere diam ex, sed facilisis erat tempus et. Cras mattis cursus tristique. Aliquam erat volutpat.