Inflearn Community Q&A
asked
질문입니다.
Resolved
Written on
·
125
1
.feature > div 에 float: left; 를 주면
.feature이 높이값을 잃어서 overflow: hidden; 을 줘야하는거 아닌가요? 영상에서는 높이값을 잃지 않았네요..? 이유가 뭔가요??
jqueryHTML/CSS웹 디자인반응형-웹
Answer 1
2
codingworks
Instructor
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>