float을 해제하는 방법

김수영·2021년 12월 13일
0

CSS

목록 보기
4/11
post-thumbnail

float을 해제하는 방법들

float 속성을 자식 엘리먼트에 사용하게 되면 부모 엘리먼트가 자식의 높이를 감지할 수 없기 때문에 이를 반영하기 위한 방법이 필요하다. 다음 코드를 가정으로 한다.

<div class="parent">
  부모
  <div class="child">
    자식
  </div>
</div>
.child {
  float: left;
}

부모 엘리먼트에 float 적용

  • 자식을 포함할 만큼만 너비로 줄어듦
  • 부모가 겹겹이 있을 경우 계속해서 float 시켜야 함
.parent {
  float: left;
}

부모에 overflow 속성 적용

  • overflow: auto 의 경우, 자식의 너비가 더 크면 스크롤바 생김
  • overflow: hidden 의 경우, 자식의 너비가 더 크면 잘림
.parent {
  overflow: hidden;
}

부모가 끝나기 전 빈 엘리먼트로 clear 적용

  • 의미없는 엘리먼트를 넣기 때문에 권장되지 않음
<div class="parent">
  ...
  <div class="clearfix">
  </div>
</div>
.clearfix {
  clear: both;
  height: 0;
  overflow: hidden;
}

부모에 display: inline-block 적용

  • 약간의 여백이 생김
  • 자식의 너비를 포함할 만큼으로 줄어듦
.parent {
  display: inline-block;
}

가상요소로 clear 적용

  • 제일 권장되는 방법
.parent::after {
  content: '';
  display: block;
  clear: both;
}

참조

profile
기술과 인문학의 교차점

0개의 댓글