CSS float속성은 요소가 어떻게 흐르는지(떠다니는지)를 지정합니다.

CSS float속성은 지워진 요소옆에 어떤 요소가 떠오르며 어떤 면에 놓일 수 있는지 지정합니다.

float속성

float속성은 웹페이지의 배치 및 레이아웃에 사용됩니다.

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

• left - 요소가 컨테이너의 왼쪽으로 흐릅니다.(배치)
  
• right - 요소가 컨테이너의 오른쪽으로 흐릅니다.(배치)
  
• none - 요소가 뜨지 않습니다. 기본값입니다.
  
• inherit - 요소는 부모의 float값을 상속받습니다.
  

간단한 예로 float속성은 이미지 주위의 텍스트를 줄바꿈할 수 있습니다.

예 - float : right;

img {
    float: right;
}

예 - float : left;

img {
    float: left;
}

예 - No float

img {
    float: none;
}

clear 속성

clear속성은 지워진 요소 옆에 어떤 요소가 떠오르며 어떤 면에 떠 다니는지 지정합니다.

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

• none - 양쪽에 부동 요소를 허용합니다. 기본값입니다.
  
• left - 왼쪽에 부동요소가 허용되지 않습니다.
  
• right - 오른쪽에 부동요소가 허용되지 않습니다.
  
• both - 왼쪽 또는 오른쪽에 부동 요소가 허용되지 않습니다.
  
• inherit - 요소는 부모의 명확한 값을 상속받습니다.
  

clear속성을 사용하는 가장 일반적인 방법은 float속성을 사용한 후 이용하는 것입니다.

float을 지우려면 clear를 float과 일치시켜야 합니다. 요소가 왼쪽으로 떠 있는 경우 왼쪽으로 지워야 합니다. 

다음 예는 float을 왼쪽으로 지웁니다. 왼쪽에 부동 요소가 허용되지 않음을 의미합니다.

div {
    clear: left;
}

clearfix Hack

요소가 포함된 요소보다 크고 떠 다니면 해당 요소가 컨테이너 외부로 넘칠 것입니다.

요소에 overflow : auto;를 추가하여 외부로 넘치는 문제를 해결할 수 있습니다.

.clearfix {
    overflow: auto;
}

overflow : auto clearfix는 margin 및 padding을 제어할 수 있는 한 잘 작동합니다. (그렇지 않으면 스크롤 막대가 표시될 수 있음). 

새롭고 현대적인 clearfix hack은 사용하기가 더 안전하며 다음 코드가 예입니다.

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

** 뒤에 유사요소 ::after 를 배우게 될 것입니다.

웹 레이아웃 예

float속성을 사용하여 전체 웹 레이아웃을 수행하는 것이 일반적입니다.

.header, .footer {
    background-color: grey;
    color: white;
    padding: 15px;
}

.column {
    float: left;
    padding: 15px;
}

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

.menu {
    width: 25%;
}

.content {
    width: 75%;
}