CSS Float(浮动)

CSS의 float 속성은 상자가 플로팅되어야 하는지 지정합니다. CSS의 float 속성은 위치 성질입니다. 이는 요소를 왼쪽이나 오른쪽으로 밀고, 다른 요소가 그 주위를 둘러싸게 하여, 일반적으로 이미지와 레이아웃에 사용됩니다.　　　

CSS의 플로팅 요소

요소를 왼쪽이나 오른쪽으로 플로팅할 수 있지만, 이는 생성되지 않은절대 위치의상자 요소. 플로팅 요소 뒤의 모든 요소는 플로팅 요소의 다른 측으로 흐를 것입니다.

이 float 속성은 다음 세 가지 중 하나의 값을 가질 수 있습니다:

요소가 어떻게 플로팅하는지

플로팅 요소는 일반 흐름에서 제거되고, 가능한 한 포함 요소의 사용 가능한 공간에서 왼쪽이나 오른쪽으로 가능한 한 많이 이동합니다.

除非漂浮物的clear이 속성은 다른 요소의 흐름을 방해하며, 다른 요소가 일반적으로 플로팅 흐름을 둘러싸는 경우를 제외하고는 흐름을 둘러싸지 않습니다. 요소는 수평 플로팅으로, 이는 요소가 위로나 아래로 플로팅할 수 없고 오직 왼쪽이나 오른쪽으로만 플로팅할 수 있다는 것을 의미합니다.

img　{
　　　　float:　left;
}

여러 플로팅 요소가 인접적으로 배치되면 수평 공간이 있을 때까지 그들은 서로 인접하게 플로팅할 것입니다. 플로팅을 수용할 공간이 부족하다면, 적합할 때까지 아래로 내릴 것입니다.

.thumbnail　{
　　　　float:　left;
　　　　width:　125px;
　　　　height:　125px;
　　　　margin:　10px;
}

플로팅을 제거하는 (Clear) 속성으로 플로팅을 종료

플로팅 요소 이후의 요소는 그 주위로 흐를 것입니다. clear 속성은 요소 상자의 어떤 측에도 다른 플로팅 요소를 배치하지 않도록 지정합니다.

.clear　{
　　　　clear:　left;
}