[CSS] float 속성과 clear 속성

March 13, 2024 1 분 소요

[CSS] float 과 clear 속성

요소의 좌,우로 내용이 흐르는것처럼 만들어줌
레이아웃 배치를 위해 만들어진 속성 ( 예) 기사에 이미지를 넣을 때)
간단하게 정렬할 때, 확실한 목적이 있을 때 많이 사용
html의 모든 태그들은 float:none; 값이 default로 부여되어 있음
flexbox 메서드 등장 이후에는 많이 사용되지는 않음
normal flow의 특징(block 레벨 요소는 block 레벨 요소의 계산 방식을, inline 레벨 요소는 inline 레벨 요소는 inline의 계산 방식을 따르는 웹페이지의 기본적인 레이아웃 흐름)은 적용되지 않고, 별도의 배치 효과가 적용 됨

(1) none: 기본값 (요소를 뜨게 하지 않음)
(2) left: (부모 요소의) 왼쪽에 뜨도록
(3) right: (부모 요소의) 오른쪽에 뜨도록
(4) inherit: 부모의 float 값을 상속받음

float의 속성은 상속되기 때문에, float 속성이 적용된 요소의 하단에 위치하는 요소는 float 속성의 영향을 받게 됨. clear 속성을 사용하여 이러한 현상을 막을 수 있음
=> 따라서 clear 속성을 사용해 float의 영향을 받지 않게 할 수 있음

(1) left: 왼쪽에 floating된 요소 해제
(2) right: 오른쪽에 floating된 요소 해제
(3) both: 왼쪽, 오른쪽 floating된 요소 모두 해제
(4) none: 기본값 (floating 해제하지 않음)