-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
해결됨
질문입니다.
20.12.22 22:18 작성 조회수 81
1
.feature > div 에 float: left; 를 주면
.feature이 높이값을 잃어서 overflow: hidden; 을 줘야하는거 아닌가요? 영상에서는 높이값을 잃지 않았네요..? 이유가 뭔가요??
답변을 작성해보세요.
2
코딩웍스(Coding Works)
지식공유자2020.12.23
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>
답변 1