웹 프로그래밍 css(31) - float, clear

🔥오늘의 목표🔥

float, clear에 대해서 알아보자. 

📕 float

• 요소의 흐름을 조정하는 속성이다.

float: none | left | right | initial | inherit;

📒속성값

• none: 기본 속성, 요소를 띄우지 않는다.
• left: 요소를 왼쪽으로 띄운다.
• right: 요소를 오른쪽으로 띄운다.

🔸 특징

• 요소를 보통의 흐름에서 벗어나 띄어지게 함.
• 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있음.
• 대부분 요소의 display 값을 block으로 변경함
  (display 값 변경 예외: inline-table, flex 등)

더 알아보기

📕 clear

• 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다.

clear: none | left | right | both | initial | inherit;

🔹예시
float된 요소에 따라 뒤에 나오는 요소들이 영향을 받는다.
이 영향을 없애고 싶을 때, clear을 사용해 지울 수 있다.
한 요소에 clear를 지정해 float 영향을 지우면 그 이후 요소에도 float 영향을 지울 수 있다.

📒속성값

• none : 양쪽으로 floating 요소를 허용(기본값)
• left : 왼쪽으로 floating 흐름 제거
• right : 오른쪽으로 floating 흐름 제거
• both : 양쪽으로 floating 흐름 제거

🔥오늘의 배운 점🔥

float, clear는 쌍으로 자주 쓰인다고 한다. 장 알아두자.