CSS 강좌 | Property > float

개요

float 속성으로 요소를 오른쪽 또는 왼쪽에 배치할 수 있습니다.

  • 기본값 : none
  • 상속 : No
  • 애니메이션 : No
  • 버전 : CSS Level 1

문법

float: none | left | right | initial | inherit
  • none : float하지 않습니다.
  • left : 왼쪽에 배치합니다.
  • right : 오늘쪽에 배치합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-size: 30px;
      }
      img.a {
        float: right;
      }
      img.b {
        float: left;
      }
    </style>
  </head>
  <body>
    <img src="images/bg-house.png" width="200" class="a">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum.</p>
    <img src="images/bg-house.png" width="200" class="b">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum.</p>
    </div>
  </body>
</html>

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 4.0+
  • Opera : 7.0+
  • Safari : 1.0+
Category

Created on 2017-05-23 10:48 | Updated on 2017-05-23 10:48

이 글을 공유하기

Kakao

Book navigation