float

• 일반적인 흐름에서 분리된 요소를 부모 요소 라인박스의 왼쪽이나 오른쪽에 배치
• 독립된 개체가 됨 > 다른 요소와 겹치지 않음
• 부모 요소 안에서만 움직임
• 다른 요소의 배치에 영향을 끼침

img{
	/* 왼쪽 배치 */
	float: left;
    
    /* 오른쪽 배치 */
    flaot: right;
}

float 배치에 일어나는 문제 해결

이미지 아래 여백 없애는 트릭

vertical-align

• inline 속성에서만 적용

float: left;
vertical-aligion: top;

/* 중심이 일치하는 것 처럼 보임 */
vertical-aligion: middle;

block

float: left;
display: blcok;

레이아웃 흐름에 영향을 미치지 않도록 하기

clear - float 효과 해제하기(겹침 방지)

• float 부모 요소에 height를 안 줘도 자동으로 float 요소 만큼의 높이로 온다.
• 자식 요소를 잃어버린다.
• block 요소에만 적용됨
• inline 요소에 적용되지 않음

clear: none;
clear: left;
clear: right;
clear: both;

overflow - 넘치는 요소 확인(자식을 감싸지 못하는 문제 해결)

• 부모 요소에 적용
• 넘치는 요소까지 포함해서 렌더링한다.
• 잃어버렸던 자식을 되찾는다
• 요소가 박스를 넘어가면 넘어간 부분이 보이지 않는 문제가 생김
• scroll hidden
• visible은 보이는 값이기 때문에 포함 x

overflow: scroll;
overflow: hidden;

flow-root - 주로 쓰이는 방법(자식 요소에 대한 부모의 높이 문제 해결)

• float으로 인해 부모 요소인 thumbnail이 인식하지 못하는 높이를 포함하도록 BFC를 생성
• 부모 요소에 적용

display: flow-root;

shape-outside

• float에서 주로 쓰임
• 주위의 텍스트가 어떻게 감쌀지 정의

shape-outside: circle(50%);