[CSS] float , clear

오늘은 float 과 clear 를 소개하려고 한다.

웹페이지를 만들 때 이미지를 넣고 글을 쓰는 경우가 종종있는데

글이 이미지를 둘러쌀지 말지 결정하는 속성이다.

 

---

float

float 은 둘러싸기를 지정하는 속성이다. 

둘러싸는 방식에는

왼쪽으로 이미지를 놓고 뒤에 계속되는 요소는 오른쪽으로 둘러싸게끔 하는 left

오른쪽에 이미지를 놓고 뒤에 계속되는 요소는 왼쪽에 둘러싸게끔 하는 right

둘러싸기를 하지 않는 none

 

이렇게 세가지 방식이 있다.

 

float을 쓰려면

<style> 에서 쓰면 되고 이건 이미지에 대한 속성 부여이므로

 

img{float:right;}

 

으로 쓰면 된다.

 

class는 레이아웃이나 전체 틀을 보정하거나 글자의 속성부여하는 것이고

img 는 이미지에 대한 속성을 부여한다는 것을 알아두면 헷갈리게 쓰지는 않을 것 같다.

 

---

clear

float으로 둘러싸기를 지정했다면 clear 는 둘러싸기를 해제하는 속성이다.

방식도 float 과 비슷하다.

 

왼쪽으로 float을 설정해서 해제하려면 left

오른쪽으로 float을 설정해서 해제하려면 right

왼쪽, 오른쪽 모두 float을 설정해서 해제하려면 both

둘러싸기를 해제하지 않으려면 none.

 

clear 는 이미지를 따로 넣는게 아니고 해제의 역할만 수행하므로 class에서 사용해도 되고

div 안에다 넣어서 div 안에 실행하는 경우 둘러싸기가 해제된 상태에서 작업하라고 설정해도 된다.

 

 

---

Example

 

다음과 같은 이미지로 float 과 clear를 적용해보고자 한다.

 

 

float은 right 로 구분을 위해 mybox에 테두리를 넣고 float_off 클래스로 clear를 적용하였다.

 

 

clear를 적용한 글은 둘러싸기가 해제되어서 이미지 밑으로 배치되는 것을 볼 수 있다.