CSS float 과 Clear

CSS float 속성은 요소가 플로팅되는 방법을 지정합니다.

CSS clear 속성은 지운 요소 옆에 플로팅할 수 있는 요소와 측면을 지정합니다.

float 속성

float 속성은 콘텐츠를 배치하고 포맷하는 데 사용됩니다. 예를 들어, 이미지가 컨테이너의 텍스트에 왼쪽으로 플로팅되도록 합니다.

float 속성은 다음 값 중 하나를 가질 수 있습니다.

  • left - 요소가 컨테이너의 왼쪽으로 붙습니다.
  • right - 요소가 컨테이너의 오른쪽으로 붙습니다.
  • none - 요소가 플로팅되지 않습니다(텍스트에서 발생하는 위치에만 표시됩니다). 기본 설정입니다.
  • inherit - 요소는 상위 요소의 플로팅 값을 상속합니다.

float: right;

다음 예제에서는 이미지가 텍스트에서 오른쪽으로 이동하도록 지정합니다.

Pineapple 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.

예제 1
img {
  float: right;
}

float: left;

다음 예제에서는 이미지가 텍스트에서 왼쪽으로 이동하도록 지정합니다.

Pineapple 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.

예제 2
img {
  float: left;
}

float: none;

다음 예에서는 이미지가 텍스트에서 발생한 위치에 표시됩니다.

Pineapple 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.

예제 3
img {
  float: none;
}

서로 나란히 붙이기

일반적으로 div 요소는 서로 위에 표시됩니다. 그러나 float:left;를 사용하면 요소가 서로 옆에 붙게 할 수 있습니다.

예제 4
div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

clear 속성

float 속성을 사용할 때 아래(오른쪽이나 왼쪽이 아님) 다음 요소를 원할 때 clear 속성을 사용해야 합니다.

clear 속성은 플로팅된 요소 옆에 있는 요소에 대해 수행할 작업을 지정합니다.

clear 속성은 다음 값 중 하나를 가질 수 있습니다.

  • none - 요소는 왼쪽 또는 오른쪽 부동 요소 아래로 밀리지 않습니다. 기본 설정입니다.
  • left - 요소는 왼쪽 플로팅된 요소 아래로 밀립니다.
  • right - 요소는 오른쪽 플로팅된 요소 아래로 밀립니다.
  • both - 요소는 왼쪽 및 오른쪽 플로팅된 요소 아래로 밀립니다.
  • inherit - 요소는 부모로부터 clear 값을 상속합니다.

float을 clear할 때는 float에 clear를 일치시켜야 합니다. 요소가 왼쪽에 있으면 왼쪽에 clear해야 합니다. 플로팅 요소는 계속 이동하지만 clear된 요소는 웹 페이지의 아래에 나타납니다.

예제 4
div1 {
  float: left;
}

div2 {
  clear: left;
}

clearfix hack

플로팅 요소가 포함된 요소보다 크면 컨테이너 외부에서 “오버플로”됩니다. 이 문제를 해결하기 위해 clearfix hack을 추가할 수 있습니다.

예제 5
.clearfix {
  overflow: auto;
}

overflow: auto; clearfix는 여백과 패딩을 계속 제어할 수 있는 경우 잘 작동합니다. 하지만 최신 clearfix hack이 더 안전하게 사용될 수 있으며, 대부분의 웹 페이지에 다음과 같은 코드가 사용됩니다.

예제 6
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}