float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너 왼쪽이나 오른쪽에 배치되게 한다.
- none : 기본 값, 원래 상태
- left : 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함
- right : 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함.
- 문서의 흐름에선 제외되지만, 필요한 만큼의 공간을 차지한다.
float 속성 예제입니다.
float 속성 예제입니다.
float 속성 예제입니다.
float 속성 예제입니다.
float 속성 예제입니다.
파란색 박스에 의해 공간을 차지하게 되고, 위 p 태그에 의해서 문장이 출력된다.
그러나 문장의 위치가 다르게 되는 문제가 발생한다.
위 문제를 해결할 수 있는 방법이... clear 속성이다.
clear 속성은 float 요소 이후에 표시되는 요소가 float 을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.
- none : 기본 값, 아래로 이동되지 않음을 나타내는 키워드
- left : float이 left인 요소의 아래로 내려간다.
- right : float 이 right인 요소의 아래로 내려간다.
- both : float이 left, right인 요소의 아래로 내려간다.
- clear : both; 를 사용하면 한방에 해결!