float

<div class="clearfix">
	<div class="box">1</div>                                                                                                                                                                                                                                        
    <div class="box">2</div>                                                                                                                                                                                                                                        
    <div class="box">3</div>                                                                                                                                                                                                                                        
</div>                                                                                                                                                                                                                                        
 
<div class="box4">4</div>

  .box {
        width: 100px;
        height: 100px;
        margin :10px;
        background: tomato;
        float: left;
    }
    
    .box4 {
        width: 100px;
        height: 100px;
        margin: 10px;
        background: blue;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: block;
    }

float라는 개념은 display: flex가 등장하면서 밀려나는 추세

 

    float에 영향을 받지 않으려는 해당 요소에 clear: left/right/both(권장)를 사용

    

기본적으로 떠 있는 개념이기 때문에 아래에 다른 요소가 깔릴수가 있음

(다른 속성들을 해제하는 것이 중요)

 

    float를 넣어주면 display: block값이 들어가는 것과 같음

 

    display: flex가 적용된 값들은 block값이 들어가지 않음

 

    부모요소에 clearfix 클래스를 사용하는 것을 추천

    (clearfix가 있는 부모요소에는 float 요소가 있는 자식요소들만을 포함하도록 지정)