[HTML&CSS] float(feat.clear)

#float

<기본 개요>

-float 라는 단어는 원래 ‘뜨다’ 라는 의미

-웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.

-float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줌

left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)- 

-float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다.

<float 속성값>

• inherit: 부모 요소에서 물려받음
• initial: 기본값으로 설정함
• left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
• right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
• none - 요소를 띄우지 않음

또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.

#clear

<간단 개념>

-clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다.

-따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 flaot 속성에 영향을 받지 않도록 설정해줘야 합니다.

 

(출처:www.tcpschool.com/css/css_position_float)