Float Next to Each Other

====== CSS Layout - float and clear ====== * description : CSS width, max-width, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-26 \\ \\ =====Source of the article==== * [[https://www.w3schools.com/css/css_float.asp|CSS Layout - float and clear]] \\ CSS ''%%float%%'' 속성은 요소가 어떻게 __떠 있어야(float)__ 할 지를 지정합니다.\\ CSS ''%%clear%%'' 속성은 어떤 요소가 __속성이 제거된 요소(the cleared element)__ 옆에서 플로트 될 수 있고, 어떤 방향에서 플로트 될 수 있는 지를 지정합니다.\\ \\ ======The float Property====== ''float'' 속성은 콘텐츠 위치 지정 및 콘텐츠 구성 - 예를 들어 이미지가 컨테이너 내부에서 텍스트 좌측으로 떠 있게 하기 - 에 사욛합니다.\\ ''float''속성은 하기의 값 중 하나를 가질 수 있습니다.\\ * left - 요소는 컨테이너의 좌측에 떠 있습니다. * right - 요소는 컨테이너의 우측에 떠 있습니다. * none - 요소는 떠 있지 않고 (텍스트에서 발생하는 곳에서 표시됩니다). 기본 값입니다. * inherit - 요소는 부모 요소의 float값을 상속 받습니다. \\ 가장 간단한 용도로, ''float'' 속성은 이미지 주위의 텍스트를 감쌀 때 사용할 수 있습니다.\\ ==== Example - float: right; ====







  Float Right
  
    In this example, the image will float to the right in the paragraph, 
    and the text in the paragraph will wrap around the image.
  

  
    
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, 
      nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
      est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. 
      Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
      interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. 
      In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
      Integer fringillacongue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. 
      Cras ac leo purus. Mauris quis diam velit.

\\ \\ ===== Example - float: left; ===== 아래 예제는 이미지가 텍스트에서 왼쪽으로 __떠 있도록(float)__ 지정합니다.\\ ====예제====


  
  

  
    Float Left

    
      In this example, the image will float to the left in the paragraph, 
      and the text in the paragraph will wrap around the image.
    

    
      
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, 
      nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim 
      ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, 
      auctor vitae massa. Fusce luctus vestibulum augue ut
      aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. 
      Praesent convallis urna a lacus interdum ut hendrerit risus congue. 
      Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. 
      In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
      dui eget tellus gravida venenatis. 
      Integer fringilla congue eros non fermentum. Sed dapibus
      pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

\\ \\ ===== Example- No float ===== 하기 예제에서 이미지는 텍스트에서 위치한 곳에서 표시됩니다.(float: none;):\\


    
  

  
    Float None

    
      In this example, the image will be displayed just where it occurs in the text (float: none;).
    

    
      
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
      interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
      nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
      aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis
      urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper
      ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
      dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus
      pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

\\ \\ =====Example- Float Next to Each Other===== 일반적으로 div 요소들은 서로 위에 표시됩니다(블록 요소처럼). 그러나 ''float: left''를 사용하면 요소들이 서로 옆에 플로트되도록 할 수 있습니다.\\ ====예제====


Float Next to Each Other
    
  

  
    Float Next to Each Other

    In this example, the three divs will float next to each other.

    Div 01
    Div 02
    Div 03