[CSS] float를 해제하는 방법들

float를 해제하는 방법들

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

다음 코드를 가정으로 한다

<div class="parent">
  부모
  <div class="child">
  자식
  </div>
</div>

.child {
    float : left;
}

부모 엘리먼트에 float 적용

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

.parent{
    overflow : hidden;
}

부모에 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;
}

출처 :

• https://github.com/baeharam/Must-Know-About-Frontend/