HTML, CSS /
CSS float 속성과 clear 속성 사용법 및 예제

CSS float 속성과 clear 속성 사용법 및 예제

웹 문서를 만들다 보면 이미지 옆에 나란히 텍스트 문단을 배치해야 할 때가 있습니다. float 속성은 웹 문서에서 이미지를 떠 있게 하여 텍스트와 함께 어떤 식으로 배치할 것인가에 대한 속성입니다. 그리고 레이아웃을 구성할 때에도 많이 사용되고 있습니다. clear 속성은 float 속성을 해제하는 속성입니다.

그럼 예제를 통해서 float 속성과 clear 속성에 대해서 알아보겠습니다.


1. float 속성의 값

속성 값설명
left해당 요소를 왼쪽에 배치합니다.
right해당 요소를 오른쪽에 배치합니다.
nonefloat 속성을 적용하지 않습니다. 기본값입니다.


2. clear 속성의 값

속성 값설명
leftfloat: left를 해제합니다.
rightfloat: right를 해제합니다.
bothfloat: left와 float: right를 모두 해제합니다.

1. 예제 : float 속성을 사용한 요소를 왼쪽, 오른쪽으로 배치

1. 사용 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>float 속성</title>
<style>
img {
     float: left;           /* 왼쪽으로 플로팅 */
     margin-right: 30px;    /* 오른쪽 마진 적용 */
     margin-bottom: 20px;   /* 아래쪽 마진 적용 */
}
h2 {
     float: right;          /* 오른쪽으로 플로팅 */
     margin-left: 30px;     /* 왼쪽 마진 적용 */
}
</style>
</head>
<body>
     <img src="img/img_2.png">
     <p>
          관계형 데이터베이스(RDBMS) 제품들 중에서 대표적인 마이크로소프트(Microsoft)에서 
          만든 SQL Server와 SQL Server를 관리하기 위한 통합 도구인 
          SSMS(SQL Server Management Studio)을 설치하는 방법에 대해서 알아보겠습니다. 
          그리고 설치하는 방법은 간단하고 소요 시간은 30분 이내에 설치가 완료됩니다.  
     </p>
     <p>
          ※ Express 버전으로 설치 : SQL Server 2022 Express는 데스크톱, 웹 및 소형 서버 
          애플리케이션의 개발 및 제작에 적합한 무료 SQL Server 버전입니다.
     </p>
     <h2>BlueShare 블로그</h2>
     IT 공부, IT 정보, 생활정보, 재테크 정로를 공유하는 블로그입니다.
     IT 공부, IT 정보, 생활정보, 재테크 정로를 공유하는 블로그입니다.
     IT 공부, IT 정보, 생활정보, 재테크 정로를 공유하는 블로그입니다.
     IT 공부, IT 정보, 생활정보, 재테크 정로를 공유하는 블로그입니다.
</body>
</html>


2. 실행 결과 화면

float 속성을 사용한 요소를 왼쪽, 오른쪽으로 배치 사용 예제 실행 결과 화면입니다.

2. 예제 : float 속성을 사용한 요소를 수평 정렬

1. 사용 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>float 속성</title>
<style>
div { border: 1px solid black;
     width: 100px; height: 100px; margin: 5px;
     line-height: 100px; text-align: center; }
h2 { clear: both;}
#box1 { 
     background-color: red;
     float: left;   /* 왼쪽으로 플로팅 */
}
#box2 { 
     background-color: blue;
     float: left;   /* 왼쪽으로 플로팅 */
}
#box3 { 
     background-color: red;
     float: right;   /* 오른쪽으로 플로팅 */
}
#box4 { 
     background-color: blue;
     float: right;   /* 오른쪽으로 플로팅 */
}
</style>
</head>
<body>
     <h2>왼쪽 정렬</h2>
          <div id="box1">box1</div>
          <div id="box2">box2</div>
     <h2>오른쪽 정렬</h2>
          <div id="box3">box3</div>
          <div id="box4">box4</div>
</body>
</html>


2. 실행 결과 화면

▼ 오른쪽 정렬은 지정한 순서대로 붙습니다.

float 속성을 사용한 요소를 수평 정렬 사용 예제 실행 결과 화면입니다.

3. 예제 : float 속성을 사용한 레이아웃 만들기

1. 사용 예제 소스 코드

<!DOCTYPE html>
<html>
<head>
<title>레이아웃 만들기</title>
<style>
#container {
     width: 600px;   /* 전체 너비*/
     margin: 0 auto; /* 내용을 가운데로 배치하기 위해서 왼쪽, 오른쪽 마진을 auto 지정 */    
}
#header {
     width: 600px;
     height: 100px;
     background-color: grey;
}
#contents {
     width: 400px;
     height: 300px;
     background-color: orange;
     float: left;   /* 왼쪽으로 플로팅 */
}
#sidebar {
     width: 200px;
     height: 300px;
     background-color: blue;
     float: left;    /* 왼쪽으로 플로팅 */
}
#footer {
     width: 600px;
     height: 80px;
     background-color: green;
     clear: both ;   /* 플로팅 해제 */
}
</style>
</head>
<body>
     <div id="container">
          <div id="header">header</div>
          <div id="contents">contents</div>
          <div id="sidebar">sidebar</div>
          <div id="footer">footer</div>
     </div>
</body>
</html>


2. 실행 결과 화면

① contents 영역과 sidebar 영역을 왼쪽으로 플로팅 → float: left

② footer 영역은 sidebar에서 지정한 float 속성에 영향을 받기 때문에 clear 속성으로 float 속성 해제

→ clear: left 또는 clear: both

float 속성을 사용한 레이아웃 만들기 사용 예제 실행 결과 화면입니다.


이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!

관련 이전 게시글

CSS 박스 모델 구성 요소 및 box-sizing 속성

CSS 여백 조절하는 방법 – margin, padding 속성

CSS 테두리 속성 지정 (스타일, 두께, 색, 둥글게)

CSS display 속성 (none, block, inline, inline-block)

CSS visibility 속성, visibility:hidden과 display:none 차이점

동일 카테고리 게시글

위로 스크롤