인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

박찬형님의 프로필 이미지
박찬형

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)

float를 활용한 배치에서 질문

작성

·

146

1

저 21분 44초에서  clear 클래스의 div는 클래스 left나 right의 뒤에 배치되어 있는데 왜 텍스트는 div 박스랑 혼자 밑에 배치되어있는건가요?

그리고 레프트랑 라이트는 플로트 속성을 지니고 있으니까 패런트의 높이에 영향을 주지 않아야 하는거 아닌가요? 그런데 왜 패런트 박스의 크기가 클래스 레프트와 라이트를 포함하나요?

답변 1

1

.clear는 너비값이 100%이기 때문에 자연스럽게 밑에 배치된 것입니다.

그리고 자식요소에 플로트 속성이 있으면 부모요소는 높이값이 없어집니다.
부모요소가 자식요소가 없어졌다고 생각해서 그러는 겁니다.
이럴 경우 부모요소에 높이 값을 주거나 overflow: hidden을 줍니다.

박찬형님의 프로필 이미지
박찬형

작성한 질문수

질문하기