[CSS] Float를 사용해 레이아웃을 잡을 때 부모영역 처리하기

혜지니어·2022년 8월 8일
0

float?

float 프로퍼티란, '부유하다'라는 뜻.
블록 속성의 엘레먼트에 부유속성을 부여하여 레이아웃을 배치하는 방법이다.
자식 엘레먼트에 float: left를 사용하게 되면 부모영역이 높이값을 파악하지 못해 잘리는 문제가 발생하게 되는데!

float를 clear하기

이 때 부모 요소가 다시 자식 요소를 감쌀 수 있게 float을 초기화(clear) 하여 버그를 고쳐주는(fix) 코드가 필요한데 이것을 clearfix라고 한다.

clearfix 4가지

  1. 부모에게 가상 요소 ::after 사용(권장)
  2. 부모에게 overflow: hidden, overflow: auto 사용 (비권장)
  3. 부모 바로 다음 뒤에 태그 만들어서 clearfix 스타일 지정 (비권장)
  4. 부모 역시 float: left 적용 (비권장)

1. 부모에게 가상요소 ::after 사용

  <nav>
    <h1>제목</h1>
    <ul>
      <li>1번</li>
      <li>2번</li>
      <li>3번</li>
    </ul>
  </nav>
h1 {
  float: left
}

ul {
  float: right
}

nav::after {
  dispaly: block;
  content: '';
  clear: both;
}
  • clear both는 float: left, right 둘 다 초기화할 때 지정하는 속성이다
  • display: block 말고 table을 해도 된다.

2. 부모에게 overflow: hidden, overflow: auto 사용

  • overflow: auto를 할 경우 스크롤바가 생길 수도 있다.
  • overflow: hidden을 할 경우 내용이 잘릴 수 있다.

3. 부모 바로 다음 뒤에 태그 만들어서 clearfix 스타일 지정

  • 태그를 하나 더 만들어 clear: both; height: 0; overflow: hidden;로 스타일을 지정하는 방법
  • 의미없는 태그를 하나 더 만들어야하기에 비효율적이다.

4. 부모 역시 float: left 적용

  • 부모를 묶고있는 부모에게 어차피 clearfix를 또 줘야하는 일이 생길 수 있다.

출처 및 참고
https://takeu.tistory.com/20

profile
어제보다 오늘 더 성장하기

0개의 댓글