<CSS>태그의 이동(2): float

* float : 띄우다. 

태그를 3차원적인 공간으로 띄운다. 그 축은 모니터와 수직을 이루는 선 

1. 기본적인 float 과 clear 

1) 기본적인 div 두개 준비 

↓ CSS 

2) 오른쪽으로 float 했을 경우 : 

1번박스가 3차원으로 2번박스와 다른 높이로 떴으므로 원래 1번박스가 있던 공간이 비었다 -> 2번박스가 올라옴. 

3) float : left 

왼쪽으로 float 했을 경우. 

1번박스가 3차원으로 2번박스와 다른 높이로 떴으므로 원래 1번박스가 있던 공간이 비었다 -> 2번박스가 올라옴. 

사진상으로 겹쳐서 보이는데 다른 높이 같은 위치에 두개의 태그가 있는 것이다. 

4) clear: 다른 태그의 float으로 인한 영향을 받지 않게 하는것. 

5) 보통 clear를 사용할때 clear : both; 로 사용한다. 

1개의 부모태그와 그 안의 4개의 자식태그 (1,2,3,4)

HTML

CSS

 줄바꿈이 되어 박스가 내려갈때 우선 원래 있어야 하는 위치 ( 맨 윗줄 맨 오른쪽) 에서 바로 왼쪽에 있는 박스 길이만큼 내려간다. (↓) 그리고 막힐때까지 왼쪽으로 이동. 막히면 멈춘다. (←)

2. 한개의 부모태그 안에 세개의 자식태그 float.

 : 녹색 float : left 후 오렌지도 float : left 하게 되면 녹색 옆에 나란히 뜬다. 분홍색도 똑같이 옆에 나란히 뜬다. 

( 같은 높이에 떴다고 생각하면 이해하기 편하다.)

1) 부모태그의 길이가 1px이라도 작으면 안에 있는 자식태그 하나가 아래로 내려간다. 

2) 1번 박스의 길이가 길 때 

: 1번박스 바로 아래까지 가지 못하고 막힌다. 

3) 2번박스 길이가 길 때 

: 1번박스 아래까지 가지만 그 사이에 공간이 있다. 

3. 한개의 부모태그 안에 네개의 자식태그. 

1) 넓이가 좁을 때  

2) 1번박스의 길이가 길때 

3) 2번박스의 길이가 길 때

4) 3번박스의 길이가 길 때 

4. 자식태그들에 margin-bottom 주기. 

1) 2번 박스에 1px 의 margin-bottom

2) 2번박스에 1px margin-bottom , 2번박스에 2px margin-bottom

5. float의 margin과 clear의 margin

1) clear의 margin 

: margin이 눈에 보이게 들어가지 않는다 

-> 4번 ( 파랑색) 박스 위의 빈 공간에 margin이 들어간다. 

2) float의 margin 

: float의 margin은 clear에 영향을 준다.

(float도 clear도 아닌 것에는 영향을 주지 않는다.) 

3) 1)2)번 동시에 한것.  float의 margin은 영향을 주고 clear의 magin은 빈공간에 들어간다. 

6. 방향이 다른 float들 

: 방향에 따라 순서대로 배열된다. 

7. float과 position : absolute를 사용할때는 너비/높이를 지정하는게 좋다. 

ex) 너비

* banana 라는 class div 

1) 너비를 지정하지 않았을 경우 : 왼쪽 (or 오른쪽) 으로 이동하려는 속성때문에 영역이 없어진다. 

* 위의 박스는 1)~6) 에서 사용한 box 1234와 부모태그이다. banana의 영역이 없어졌다는 것을 보여주기 위해 같이 보여줌. 

2) 너비를 지정했을 경우 

3) absolute도 마찬가지 이다.