[CSS] float 속성과 clear속성의 이해

 

float 속성을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있다.

 

원래는 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이었는데, 레이이아웃용으로 많이 사용된다.

 

float이 적용된 요소는 기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동시킬 수 있다.

---

- float의 속성 값

• left : 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
• right : 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름.
• none : 기본값(default), 요소를 띄우지 않음.

** left와 right 지정시 display 속성은 무시된다.

 

예시)

• float: left;

img는 페이지의 왼쪽에 배치되고 p태그의 text들은 img를 피해 오른쪽에 흐르듯이 배치됨

 

• float: right;

img는 페이지의 오른쪽에 배치되고 p태그의 text들은 img를 피해 왼쪽에 물 흐르듯이 배치됨

 

• float: none; 

float설정을 하지 않았을 때(기본값)

 

 

 

 

- float 속성의 문제점과 clear 속성

 

어떤 요소에 float 설정을 주게되면 그 요소 뒤에 나오는 요소들은 그 요소를 피해서 배치된다.

 

예를 들면 아래의 그림과 같은 상황에서 테두리가 그려져있는 p태그를 이미지 하단에 배치시키고 싶은데,

이미지에 float 설정되어 있어서 함께 영향을 받게 되었다.

 

 

이를 해결하기 위한 속성으로 clear 속성이 있다.

clear의 속성 값은 아래와 같다.

• left : float: left; 로 주어진 속성에 영향을 받지 않게 함
• right : float: right; 로 주어진 속성에 영향을 받지 않게 함
• both : float가 left, right이든 영향을 받지 않게 함 (가장 많이 씀)

 

 

clear를 사용하여 위 문제를 아래와 같이 해결할 수 있다.

 

- CSS

.no_float_text {
  border: 1px solid black;
  clear: both; /* float 속성을 무력시킴 */
}

 

- 결과

두 번째 p태그는 img에 설정된 float의 영향을 받지 않고 원래대로 배치됨