float를 적용하고 그 요소들의 container(부모 요소)에 미리 설정한 clearfix를 적용합니다.
이때, clearfix는 content=""; clear:both: display: block;을 가지고 있어야 합니다.
img 태그를 왜 div 태그를 둘러싸서 만들까요?
반응형 때문인데요, 반응형으로 div 사이즈가 줄어들 때, img가 고유의 크기 값을 가지고 있다면 이미지는 줄어들지 않을 것입니다.
때문에 화면이 줄어들 때는 div가 줄어들고, div가 줄면서 거기에 맞게 img를 줄이기 위해서 사용됩니다.
img를 줄이기 위해서 max-width: 100%로 지정하고, padding을 이용해 여백을 생성한 뒤, box-sizing을 이용해서 일정크기가 유지 되도록 만들어 줍니다.