<img src="https://cdn.inflearn.com/public/files/posts/fbe08655-608a-4409-90f1-1e297c04bdc0/1.png" width="1308" height="579" alt="" />
<img src="https://cdn.inflearn.com/public/files/posts/c5342086-770d-4744-9e50-6560015a872d/2.png" width="1308" height="676" alt="" />
1. 첫 번째 이미지는 section .tabs div img에만 float:left를 준 모양이고, 두 번째 이미지는 img에도 float를 주고 section .tabs div p에도 float:left를 준 모양인데 두 개가 약간 헷갈리네요. 차이점이 궁금합니다.

2. 앞선 태그에 float를 주면 그 후에 오는 태그들도 float의 영향을 받는 걸로 알고 있는데 두 번째 이미지에서 이미지 태그가 블록 요소가 아니기 때문에 오른쪽에 공간이 있는데도 왜 p태그가 위로 올라가지 못한건가요?

저도 파일 열어서 해봤는데 2번처럼 되는군요. 글쎄 이부분은 p태그 안에 텍스트가 양이 많아서 강제로 넘쳐서 p태그가 100%를 가지는 것으로 보입니다. 이론적으로 설명 드리기가 제 역량으로는 어렵네요. 이부분에 대한 이론적인 설명은 제가 공부해보겠습니다.
물론 2번처럼 하셨을 때 img와 p태그의 너비를 주면 되긴합니다. img 20%, p 80%... 근데 img가 인라인블록이니 네거티브 마진을 주시건지 p태그를 80%아니라 78~79% 주시면 됩니다.

인프런 커뮤니티 질문&답변

탭 메뉴 콘텐츠- 스타일 02(실전 제작) with jQuery