개요
부유 속성이라고도 한다. 이미지와 텍스트를 쉽게 배치시키기 위해 만들어졌으며, float 속성을 left 나 right 로 지정해 준 요소 아래 혹은 위 요소는 float를 지정해 준 요소를 감싸게 된다.
left - 요소는 왼쪽에 부유하는 블록 박스를 생성한다. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐른다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다. none 이 아니라면 display 속성은 무시된다.
right - 요소는 오른쪽에 부유하는 블록 박스를 생성한다. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐른다. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라진다. none 이 아니라면 display 속성은 무시된다.
none - 요소를 부유시키지 않는다.
float 속성은 텍스트와 이미지 배치를 위해 만들어 졌지만, 레이아웃 배치용으로 자주 사용된다.
일반적으로 div태그는 가로길이가 전체를 차지하여 자동으로 줄 바꿈이 되어 버리는데, 이때 div 태그에 float 속성을 사용해주면 div태그를 가로로 배치 할 수 있다.
사용법
img { float:left } #box { float:right }
예제
<html> <head> <style> #my-img { float:left; padding:10px } </style> </head> <body> <div id="box1"> <img src="android.jpg" id="my-img"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </body> </html>
출력 결과:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
확장
float 속성은 원래 이미지와 텍스트 배치용도로 등장했지만, 최근에는 레이아웃용으로 많이 사용하고 있다.예제
<html> <head> <style> #box1 { float:left; padding:10px; background-color:#09C } #box2 { float:left; padding:10px; background-color:lightgreen } </style> </head> <body> <div id="box1">Box1111</div> <div id="box2">Box2222</div> </body> </html>
출력 결과:
Box1111
Box2222