이미지 보기

[CSS] 레이아웃에 영향을 주는 CSS 속성 'float'

21.07.05 작성

22.02.07 수정

읽는 데 1분

float 속성이란?

선택된 태그를 띄워서 부모의 공간을 기준으로 왼쪽/오른쪽 끝에 배치할 때 사용
왼쪽 끝부터 순서대로 정렬할 때는 float: left;
오른쪽 끝부터 순서대로 정렬할 때는 float: right;

*html 파일

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>float 속성의 활용</title>
    <link ref="stylesheet" href="CSS문서명.css" />
  </head>

  <body>
    <div id="left"></div>
    <div id="right"></div>
  </body>
</html>

* css 파일 # left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: yellow;
}

# right {
  float: right;
  width: 200px;
  height: 400px;
  background-color: blue;
}

이 float 속성과 레이아웃을 구성하는 여러 태그들을 이용해 웹 사이트 레이아웃을 만들 수 있다.

FE Developer 박승훈

노력하는 자는 즐기는 자를 이길 수 없다

Github

[CSS] 레이아웃에 영향을 주는 CSS 속성 'float'

TOC

float 속성이란?