에 대해서

[윤준호]

html
    <div class="product-container">
      <div>
        <h4>Fast Shipping</h4>
        <p>jack</p>
      </div>
      <div>
        <h4>crycrycry</h4>
        <p>jack</p>
      </div>        
      <div>
        <h4>kssssr</h4>
        <p>jack</p>
      </div>        
      <div>
        <h4>go home now</h4>
        <p>jack</p>
      </div>
      <div style="float: none; clear: both;"></div>
      
    </div>

css

.product-container{
    max-width: 1000px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
    background-color :aquamarine
}

.product-container div{  
    float : left;
    width : 25%;         
    text-align: center;
}

product-container div밖에 <div style="clear : both">를 썼을때는 배경이 안 나타나는데
<div style="float: none; clear: both;"></div> 를 안쪽에 쓰니 배경이 나타나더라구요.
여기서 <div style="float: none; clear: both;"></div>의 원리가 뭔가요?
그냥 잘 모르겠으면 일단 외우는데 나을까요?

[codingapple]

원래 float쓴거 바로 밑에 clear속성 넣은 박스 배치해야 다음박스가 제자리를 찾습니다

[글쓴이]

글