[CSS 기초-3] float

1. 개요

[CSS 기초-1] Block Vs inline에서 block과 inline의 element를 각각 변경할 수 있다는 설명에서 float에 대한 설명은 없었습니다.
이 포스트에서 이어 진행하겠습니다.

word나 한글 문서를 작성할 때, 그림을 텍스트로 인식과 같은 설정을 보셨을 겁니다.
마치 그림이 글을 감싸는 듯한 형상입니다.

이런 역할을 하는 것이 float 입니다.
바로 간단한 예제를 확인해보겠습니다.

2. float 예시

다음과 같은 형태로 웹이 있다고 해보겠습니다.(색은 못 넣었습니다 ㅠ)

Banner
Side Bar	Main Contents

/* Side Bar */
.main-page aside {
  width: 200px;
  background-color: green;
  float: left;
  margin-top: 10px;
}

/* Main Contents */
.main-page section{
	
    background-color: blue;
    margin-left: 210px;
}

여기서 Side Bar는 왼쪽에 붙게 하고 Main Contents는 오른쪽에 자연스럽게 유지하는 것이 주요 float의 기능입니다.
Side Bar를 보시면, 가로 200px에 float: left;를 주어 좌측에 위치 하도록 했습니다.
그리고 Main Contents는 margin-left를 210px을 주어서 10px의 거리만큼 떨어지게 했습니다.