Float

Float Property
1. What is Float?
2. Features of Float
Float values
Clear Property

Float Property

What is Float?

specifies how an element should float

한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정

Features of Float

▸ 띄어진 요소는 띄어진 요소 서로간을 인식

▸ 블록 요소를 가로로 나란히 정렬하기 위해서는 float을 이용

▸ 띄어지기 때문에, 보통 다음 블록 요소는 float된 요소 밑에 깔리게 됨

▸ float된 요소는 기본적으로 상위 요소가 영역을 파악하지 못함 (float가 요소를 띄움) 하지만 텍스트, 인라인 요소, 그리고 float된 요소만 다른 float요소를 인식 함

▸ float된 요소를 부모 요소가 포함하기 위해, height로 임의의 높이 값을 줄 수 있지만, 내부 float 요소의 높이 바뀔 때마다 직접 바꿔줘야 하고 자식요소를 인지하는것은 아님!

▸ float 될 경우, 기존 블럭 요소처럼 너비가 넓게 퍼지지 않음. 기본적으로 내부 영역 만큼의 너비를 가짐.

▸ 단을 구성하는 요소에 float시 width(px/%)값이 정의되면 단을 구성하는 모든 요소에 float을 모두 선언해야 함

★ 1:1을 만드는게 가장 중요함

Float values

left

floats to the left of its container

right

floats to the right of its container

none(default)

does not float (will be displayed just where it occurs in the text)

inherit

inherits the float value of its parent

clearfix Hack

float된 요소 다음에 비어있는 div에 clear:both 속성을 주어 부모가 높이를 인식하게 하기
float된 요소들의 부모 요소에 overflow:hidden을 줄 경우, 부모 요소는 float된 요소를 인식
overflow:hidden은 자식 요소의 margin 값도 내부로 인식하게 함

부모 요소에 ::after 가상 요소 추가

 .clearfix::after {
   content: "";
   clear: both;
   display: table;
 }

부모태그에 float 값 주기 → 다른 문제로 이어질수도 있음

Clear Property

What is Clear?

specifies what elements can float beside the cleared element and on which side

Clear Features

▸ float을 사용한 후 clear을 사용해야함

▸ float한 방향으로 clear하면 뒤에 영향을 받지않음

▸ clear은 box요소에만 들어감

Clear value

none : Allows floating elements on both sides. This is default
left : No floating elements allowed on the left side
right : No floating elements allowed on the right side
both : No floating elements allowed on either the left or the right side
inherit : The element inherits the clear value of its parent