[CSS] float

 

• float 는 content 들을 어떻게 배치하고 자리 잡을지 세팅한다.
  • left - element를 컨테이너의 왼쪽으로 float 한다
  • right- element를 컨테이너의 오른쪽으로 float 한다
  • none - float 안한다 (디폴트) (일반 텍스트 출력처럼 한다)
    • 이미지도 텍스트의 하나처럼 배치된다
  • inherit - 부모의 float 값대로 동작.

★ 일단 자신이 float가 되면 주변의 다른 element 의 content 는 그 '주변'으로 배치된다.

 

<style>
img {
	width:170px; height:170px;
	margin-left:15px;  /* 왼쪽 바깥 여백 */
}
img#f1 {
	float: none;   /* default */
}
img#f2 {
	float: right;   /* margin-left:15px */
}
img#f3 {
	float: left;
}

</style>

- 결과 페이지