• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

블릿요소 float:rihgt; 부분 질문 좀 드릴게요.

22.06.27 18:04 작성 조회수 249

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;
}

course-thumbnail

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

답변 2

·

답변을 작성해보세요.

1

코딩웍스(Coding Works)님의 프로필

코딩웍스(Coding Works)

지식공유자

2022.06.27

자식요소에 float 속성을 주면 높이값을 부모요소가 잃지만 조건은 모든 자식요소에 float가 있어야 합니다.

.title:after 에 float가 있어도 .title 안에 텍스트가 여전히 높이를 가지고 있기 때문에 부모요소가 높이값을 잃지 않습니다.

예를들어...

<div class="title">

    <span>제목</span>

  </div>

위의 경우처럼 .title span에 float가 있으면 그때 부모요소가 높이값을 잃습니다.
그런데 지금의 경우 .title 안에 텍스트에 float가 없기 때문에 부모요소 높이값에 영향을 주지 않습니다.

0

poemlovingly님의 프로필

poemlovingly

2022.06.28

몰라서 너무 답답했었는데 자세하게 설명해주셔서 제가 몰랐던 부분을 이해할 수 있었습니다.

정말 감사드려요 선생님~!!

이 글과 비슷한 Q&A