float

float란 말 그대로 '뜨다, 부유하다' 라는 말이다. 여기서 뜨다,부유하다라는 의미는 기존 레이아웃의 흐름에 상관없이 왼쪽,오른쪽으로 이동한다는 뜻이다. 주로 이미 주변에 텍스트로 감싸기 위해 만들어진 프로퍼티이다. 전체 레이아웃을 잡을 때도 중요하게 사용된다. 하지만 현재는 flex 속성으로 레이아웃 기반을 잡는 경우가 많기 때문에 많이 사용되진 않는다.
예전에는 float도 많이 사용하였기 때문에 개념정도는 알아놓는 것이 좋다.

float는 left, right, none 등의 값을 줄 수 있다.

하나하나 살펴보자.

img와 div 를 사용하여 float를 사용하여 보자.
예시를 살펴보자.

float: none

<img src="https://www.codingfactory.net/wp-content/uploads/jb-featured-image-html5.jpg" width="150px" height="150px"/>
  <p>
    하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다. 
  </p>  

body {
  height: 500vh;
  padding: 50px;
}

img {
  float: none;
}

float: none 을 사용하면 문서의 흐름에 상관없이 부유하지 않고 순서대로 배치되어 img p 태그 순서대로 배치되었다.

float: left;

• float: left; 를 사용하면 문서의 흐름에서 배제되어 부유하게 되고 왼쪽으로 정렬된다.

예시를 살펴보면 쉽게 파악될 것이다.

body {
  height: 500vh;
  padding: 50px;
}

img {
  float: left;
}

레이아웃의 흐름에 벗어나 왼쪽에 붙게되었다. 이런식으로 이미지 주변으로 텍스트를 감쌀 때 유용한 프로퍼티인 것 같다. 이런 레이아웃의 사이트를 자주 접해 보았을 것이다.

float: right;

• float: right; 를 사용하면 문서의 흐름에서 배제되어 부유하게 되고 오른쪽으로 정렬된다.

예시를 살펴보자.

body {
  height: 500vh;
  padding: 50px;
}

img {
  float: right;
}