인프런 커뮤니티 질문&답변
작성한 질문수
질문입니다.
해결된 질문
20.12.22 22:18 작성
·
101
답변 1
2
코딩웍스(Coding Works)
지식공유자
2020. 12. 23. 22:39
html 요소는 포지션 속성 중 absolute 또는 fixed를 주면 자동으로 inline-block으로 디스플레이 속성이 변경됩니다.
그래서 .feature > div 에 float: left 를 주어도 부모요소인 .feature가 높이 값을 잃지 않습니다. relative에서는 부모요소가 높이값을 잃습니다. 이건 기술적으로 정확히 왜 그런지 설명 드리기가 어렵습니다. 지금 당장 생각이 나지 않네요. 이론적인 설명은 제가 찾으면 다시 글 올릴게요. 일단 이런 경우 곧, 포지션 속성 중 absolute 또는 fixed를 주면 인라인블록으로 바뀌므로 높이값을 따로 줄 필요가 없다라고 생각하세요.
아래 코드로 연습해보시면 이해가 더 쉬우실거에요.
<style>
.feature {
border: 5px solid #000;
width: 600px;
position: absolute;
}
.feature > div {
border: 5px solid red;
float: left;
width: 250px;
height: 100px;
}
</style>
<section class="feature">
<div class="office">office</div>
<div class="service">service</div>
</section>