CSS Layout - float and clear

description : CSS width, max-width,
author : 오션
email : shlim@repia.com
lastupdate : 2021-07-26

Source of the article

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;

<style>
  img {
    width: 170px;
    height: 170px;
    margin-left: 15px;
    float: right;
  }
</style>
</head>
 
<body>
 
  <h2>Float Right</h2>
  <p>
    In this example, the image will float to the right in the paragraph, 
    and the text in the paragraph will wrap around the image.
  </p>
 
  <p>
    <img src="pineapple.jpg" alt="pineapple"
    style="width:170px; height:170px, margin-left:15px;">
      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.
    </p>
</body>

Example - float: left;

아래 예제는 이미지가 텍스트에서 왼쪽으로 떠 있도록(float) 지정합니다.

예제

  <style>
    img {
      float: left;
    }
  </style>
  </head>
 
  <body>
    <h2>Float Left</h2>
 
    <p>
      In this example, the image will float to the left in the paragraph, 
      and the text in the paragraph will wrap around the image.
    </p>
 
    <p>
      <img
        src="pineapple.jpg"
        alt="Pineapple"
        style="width: 170px; height: 170px; margin-right: 30px"
      />
      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.
    </p>
  </body>

Example- No float

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

    <style>
      img {
        float: none;
      }
    </style>
  </head>
 
  <body>
    <h2>Float None</h2>
 
    <p>
      In this example, the image will be displayed just where it occurs in the text (float: none;).
    </p>
 
    <p>
      <img src="pineapple.jpg" alt="Pineapple" style="width: 170px; height: 170px" />
      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.
    </p>
  </body>

Example- Float Next to Each Other

일반적으로 div 요소들은 서로 위에 표시됩니다(블록 요소처럼). 그러나 float: left를 사용하면 요소들이 서로 옆에 플로트되도록 할 수 있습니다.

예제

<title>Float Next to Each Other</title>
    <style>
      div {
        float: left;
        padding: 15px;
        color: white;
      }
 
      .div1 {
        background: red;
      }
 
      .div2 {
        background: dodgerblue;
      }
 
      .div3 {
        background: green;
      }
    </style>
  </head>
 
  <body>
    <h2>Float Next to Each Other</h2>
 
    <p>In this example, the three divs will float next to each other.</p>
 
    <div class="div1">Div 01</div>
    <div class="div2">Div 02</div>
    <div class="div3">Div 03</div>
  </body>

오션,, CSS, Float