[CSS] Float : left, right, inherit, none.

안녕하세요~ 제 블로그에 쓴 글 공유해드릴게요!

CSS를 공부하는 입장에서 꼭 짚고 넘어가야 할 개념인 Float속성입니다.

float속성은 많이 어렵지도 않지만, 헷갈리는 개념이라 완벽히 이해가 되지 않았는데 글을 쓰며 공부를 하게 되었네요 ㅎㅎ

1. CSS의 Float 속성에 대한 개요

1-1. w3c에 의한 float속성의 정의

A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box.

float는 같은 라인의 왼쪽 또는 오른쪽으로 shift되어 배치되는 박스의 일종이다.  

float("floated" or "floating" box)의 가장 재미있는 특징은 컨텐츠들이 float가 적용된 요소의 side에 위치하는 것이다. (clear 속성을 사용하지 않았을 때) 

컨텐츠는 왼쪽으로 float된 요소에는 오른쪽에, 오른쪽으로 float가 적용된 요소에는 왼쪽에 위치한다.

1-2. Float속성에 사용되는 값