float

inline 요소는 float된 요소를 알아본다. 그래서 사진 밑으로 들어가지 않고 감싸는 형태가 된다.

float 해제시키는 방법

overflow: hidden

부모가 float된 자식을 알아보게 한다

clear-fix

float된 자식요소를 가진 부모요소에게 clear-fix라는 클래스를 부여하고 가상요소를 만들어서 가상요소에 clear:left or right or both;

clear-fix::after {
	display: block;
	content: "";
	clear: both;
}

CSS Float 및 Clear 설명-CSS float 및 clear는 어떻게 작동합니까?
무엇이 제일 나은 float 해제 기법인가?
CSS 페이지 레이아웃 1부 – floats, positioning, display, float-root, table
Float 해제(Clear)

가상요소

::before는 첫번째 자식 요소
::after는 마지막 자식 요소

가상요소에 이미지 넣기