float와 clearfix

웹에서 배치를 할때 옆으로 나란히 태그를 나열할때 float를 사용하는데

float의 적용범위를 지정해주는 css가 clearfix이다

즉, float와 clearfix는 항상 쌍으로 사용된다

 

clearfix는 css 파일에

.clearfix::after{display:block;content:'';clear:both}

이렇게 설정해주고

float가 적용된 요소의 최 상단의 요소에 clearfix를 추가해 주면 된다

 

HTML파일

<div class="btn_tab clearfix">
      <button class="act" data-index="0">1</button>
      <button data-index="1">2</button>
      <button data-index="2">3</button>                
</div>

---

CSS파일

.tab .btn_tab button{
    float:left;
    width: 33.33%;
    height:40px;
    border-right:1px solid #fff;
    background: #666;
    color: #f1f1f1;
    font-size: 14px;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;    
}