====== CSS Layout - float - clear and clearfix ====== * description : CSS float - clear and clearfix * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-15 \\ \\ =====The source of this article==== * [[https://www.w3schools.com/css/css_float_clear.asp|CSS float - clear and clearfix]] \\ ======The clear Property====== ''clear'' 속성을 사용하고, 다음 요소를 하단에 위치시키고 싶을 때, ''clear'' 속성을 사용해야 합니다.\\ \\ ''clear'' 속성은 플로트 된 요소의 옆에 있는 요소에 적용될 것을 지정합니다.\\ \\ ''clear'' 속성은 다음의 값들 중 하나를 가질 수 있습니다.\\ \\ * ''none'' - 요소는 플로트된 요소들의 좌측 또는 우측 아래에 위치하지 않습니다. 이것이 기본 값입니다. * ''left'' - 요소는 좌측으로 플로트된 요소들 아래로 위치하게 됩니다. * ''right'' - 요쇼는 우측으로 플로트된 요소들 아래로 위치하게 됩니다. * ''both'' - 요소는 좌측과 우측 양쪽으로 플로트된 요소들의 아래에 위치하게 됩니다. * ''inherit'' - 요소는 부모 요소의 %%clear%% 값을 상속 받습니다. \\ %%floats%% 속성을 제거할 때, %%clear%% 속성을 %%float%% 속성에 일치시켜야 합니다:\\ 요소가 좌측으로 플르토 될 경우, 좌측으로 지워야 합니다.\\ 플로트 된 요소가 계속 플로트 되지만, 플로트 속성이 제거된 요소는 웹 페이지에서 그 아래에 표시됩니다.\\ \\ ==== Example ==== 하기의 예제는 좌측으로의 플로트 속성을 제거합니다.\\ %%%% 요소가 좌측으로 플로트 된 %%%% 요소 아래에 위치된다는 것을 의미합니다.\\



  
  
    Without clear
    div1
    
      div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the
      left, the text in div2 flows around div1.
    
    



    With clear
    div3
    
      div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears
      elements floated to the left. You can also clear "right" and "both".

======The clearfix Hack====== 플로트 된 요소가 플로트 된 요소를 포함하는 요소보다 더 큰 경우, 컨테이너 외부로 __넘치게 됩니다(overflow)__.\\ 이 문제를 해결하기 위해, clearfix hack을 추가할 수 있습니다.\\ ====예제====



  
  
    Without Clearfix

    
      This image is floated to the right. It is also taller than the element containing it, so it
      overflows outside of its container:
    

    
      
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit...
    

    With Clearfix
    
      We can fix this by adding a clearfix class with overflow: auto; to the containing element:
    

    
      
      Lorem ipsum dolor, sit amet consectetur adipisicing elit...

\\ ''overflow: auto'' clearfix는 마진과 패딩을 제어할 수 있는 한 잘 작동합니다.(그렇지 않을 경우, 스크롤 막대가 표시될 수 있슴). 그러나 새롭고 현대적인 clearfix hack은 사용하기에 더 안전하며, 대부분의 웹페이지에서 아래의 코드가 사용됩니다.\\ \\ ==== Example ====


 
  
  
    Without Clearfix

    
      This image is floated to the right. It is also taller than the element containing it, so it
      overflows outside of its container:
    

    
      
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit...
    

    With New Modern Clearfix
    Add the clearfix hack to the containing element, to fix this problem:

    
      
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt maxime rerum iste error.