Style cssFloat 속성

정의와 사용법

cssFloat 속성을 설정하거나 반환하여 요소의 수평 정렬 방식을 정의합니다。

팁：CSS "float" 속성은 JavaScript에서 "cssFloat"로 불리는 이유는 "float"이 JavaScript의 보존 단어이기 때문입니다。

주석：浮动 요소의 공간이 한 줄에 부족하면, 다음 줄에 공간이 충분한 줄로 이동합니다。

추가로 참조하십시오：

CSS 강의：CSS 블로킹

예제

예제 1

두 개의 버튼을 클릭할 때, 이미지가 텍스트의 왼쪽/오른쪽으로 떠오릅니다：

function floatRight() {
  document.getElementById("myImg").style.cssFloat = "right";
}
function floatLeft() {
  document.getElementById("myImg").style.cssFloat = "left";
}

직접 시도해 보세요

예제 2

DIV 요소의 cssFloat 속성 변경：

document.getElementById("myDIV").style.cssFloat = "left";

직접 시도해 보세요

문법

cssFloat 속성 반환：

object.style.cssFloat

cssFloat 속성 설정：

object.style.cssFloat = "left|right|none|initial|inherit"

속성 값

값 설명
none 오브젝트/요소가 떠오르지 않습니다. 기본 값。
left 오브젝트/요소가 부모 요소에서 왼쪽으로 떠오릅니다。
right 오브젝트/요소가 부모 요소에서 오른쪽으로 떠오릅니다。
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial。
inherit 부모 요소에서 이 속성을 상속받습니다. 참조하십시오 inherit。

기술 세부 사항

기본 값： 없음
반환 값： 요소의 수평 정렬 방식을 나타내는 문자열입니다.
DOM 버전: DOM Level 2

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원