[9] Float CSS & Clear CSS

float css 속성

float CSS 속성은 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하여 텍스트 및 인라인 요소가 주위를 둘러살 수 있도록 합니다.
요소는 페이지의 정상적인 흐름에서 제거되지만 여전히 흐름의 일부로 남아 있습니다.

 

Float 속성을 이용한 Layout 구현

float css는 여전히 레이아웃에 사용할 수 있지만 요즘에는 웹 페이지에서 레이아웃을 만들기 위한 훨씬 강력한 도구 Flexbox 및 Grid를 사용합니다.

 

실습

container는 주로 css에서 레이아웃과 스타일을 정의하기 위해 사용되는 클래스이다.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

 

---

clear css 속성

clear CSS 속성을 이용해서 float의 영향을 받지 않도록 할 수 있다.
float 속성을 사용하고 아래(오른쪽이나 왼쪽이 아닌) 다음 요소를 원할 때 clear 속성을 사용해야 한다.
clear속성은 float 요소 옆에 있는 요소에 어떤 일이 발생해야 하는지 지정한다.

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

 

float를 지울 때(clear) 플로트(float)와 클리어(clear)를 일치시켜야 한다.
요소가 왼쪽으로 플로트되어 있으면 왼쪽으로 지워야 한다. float: left => clear: left
플로팅된 요소는 계속 플로팅되지만 지워진 요소는 웹 페이지에서 그 아래에 나타난다.

 

실습

Without clear

div1

div2 Notice that div2 is after div1 in the HTML document and not after div2 in the CSS document.