인프런 커뮤니티 질문&답변
작성자 없음
작성자 정보가 삭제된 글입니다.
블릿요소 float:rihgt; 부분 질문 좀 드릴게요.
해결된 질문
작성
·
343
1
어코디언 콘텐츠 슬라이드 - 상세 내용 퍼블리싱 15:49
안녕하세요 선생님 언제나 감사하게 공부하고 있습니다. float:right;속성 질문이 있는데요.
블릿 아이콘 오른쪽 배치하는 부분인데요. position대신 float: right;로 해주잖아요.
부모요소에 overflow:hidden; 해주지 않으면 부모의 높이값을 잃는다고 알고 있어서
.accordion { border: 1px solid red; } 보더라인을 그려줘봤는데요. overflow를 주지 않아도 높이값은 가지는 것 같아요.
선생님께서도 overflow를 주지 않으셨는데요. 제가 잘못 알고 있는건지 궁금해서요. 혹시 after가상요소에 주는 float는 상관이 없는건지요?
.accordion {
border: 1px solid red;
}
.title {
border: 1px solid #ddd;
padding: 5px;
border-radius: 3px;
cursor: pointer;
/* position: relative; */
padding-left: 15px;
transition: 0.3s;
margin-bottom: 10px;
}
.title:after {
content: '\f105';
font-family: fontawesome;
/* position: absolute;
right: 10px;
top: 7px; */
float: right;
margin-right: 5px;
margin-top: 3px;
transform: 0.3s;
}
.title.active:after {
transform: rotate(90deg);
color: orange;
}
답변 2
1
코딩웍스(Coding Works)
지식공유자
자식요소에 float 속성을 주면 높이값을 부모요소가 잃지만 조건은 모든 자식요소에 float가 있어야 합니다.
.title:after 에 float가 있어도 .title 안에 텍스트가 여전히 높이를 가지고 있기 때문에 부모요소가 높이값을 잃지 않습니다.
예를들어...
<div class="title">
<span>제목</span>
</div>
위의 경우처럼 .title span에 float가 있으면 그때 부모요소가 높이값을 잃습니다.
그런데 지금의 경우 .title 안에 텍스트에 float가 없기 때문에 부모요소 높이값에 영향을 주지 않습니다.
0
