1. Block

• 면(영역)
• width, height, padding, border, marign 다 사용 가능
  

2. Inline

• 선(흐름)
• Block과 달리 옆에 나란히 배치가 되는것이 기본 성격
• 만약 공간이 부족할 시 아랫줄로 이동
• width, height, (padding,boder,marign)-top,bottom 사용 불가
  

3. Inline Block

• Block && Inline

4. Float

• float를 시키면 그 요소가 Inline, Inline Block이든 Block으로 바뀌고 block요소의 모든것을 사용할 수 있음(width, height 등)
• 기존의 Block과 차이점
  • block에 따로 width를 주지 않으면 부모의 width 100%를 차지하는데 width값을 주지 않은 상태에서 빨강이에게 float할 경우 content 길이만큼만 width를 차지
    
    
  • block 에 따로 width를 주지 않으면 남은 공간을 margin으로 자동으로 채우지만 float 을 주면 margin 이 생기지 않는다.
    그렇다고 margin을 줄수 없다는게 아니라 원래 block은 자동으로 margin을 남는 공간에 채우는 margin auto가 생기지 않는다는 것

1) 처음

2) 빨강 float:left

빨간색에게 float을 주면 빨간색이 위로 뜨게 되고, 그 뒤에 오는 형제 요소들은 빨간색이 없어 빈자리로 인식하게 되어 앞응로 오게 된다. 부모는 자식을 노랑, 파랑 밖에 인식 못하므로 사이즈가 줄어든다.

3) 빨강 float:left / 노랑 float:left

둘 다에게 주면 둘다 붕 뜨게 된다. 노란색 입장에서는 빨강이 자리를 막고있으므로 갈 수 있는 공간인 빨간색의 옆으로 이동. 이렇게 빨강, 노랑은 가로 배치가 된다. 그 뒤에 따라오는 파랑색은 빈자리가 없으므로 앞으로 오게 되고 부모 요소도 파랑이만 인식하므로 사이즈가 줄어든다.

4) 빨강 float:left / 노랑 float:left / 파랑 float:left

세 가지색 모두에게 float:left를 주면 셋 다 뜨게 된다. 파랑이 갈 수 있는 공간은 빨강이 옆에 노랑이가 있어서 못 가므로 어쩔수 없이 다음줄로 이동.

위와 같은 상황에서 셋 다 모두 붕 떠있기 때문에 부모요소는 아무것도 인식하지 못해 사이즈가 0이 된다.

5. 레이아웃 고치는 법

1) overflow:hidden;

자식 요소에 float을 주면 부모가 자식 요소를 찾지 못해 height가 줄어든다. 부모에게 overflow:hidden;을 주면 부모요소가 집 나간 자식요소들을 찾을 수 있다.

2) clearfix

float으로 인해 망가진 레이아웃을 고치기 위한 속성.

A와 B 둘다 block요소이다. A에게 float:left를 주면 A는 집을 나가게 되고 B가 A존재를 인식 못하고 위로 올라 가게 된다.

이 상황에서 B에게 clear:left를 주면 float이 어디 있는지를 파악할 수 있어 A의 존재를 알게 되고 B는 A의 아래로 배치가 된다. 부모요소 입장에서는 B가 float 된것이 아니기 때문에 B의 위치랑 사이즈에 대해 정확히 파악할 수 있다. 부모요소는 별도의 height가 없는 경우 자식들의 세로 영역의 합을 자신의 height 가진다. A는 여전히 집을 나갔기 때문에 어디로 갔는지 알 길이 없지만 clear가 된 B 기준으로 올바르게 전체 자식의 새로 영역을 파악 할 수 있다

3) Pseudo Element

실제로 HTML에 존재하지 않지만 CSS에서 fake요소를 만들어 claer를 준다.

가상요소는 각 요소당 ::before 과 ::after 두가지를 만들 수 있다.
가상요소를 사용할 때 반드시 content를 써야한다. "" 비어있는 문자열도 괜찮다.

<div class="pseudo">Red</div>
<div class="pseudo">Yellow</div>
<div class="pseudo">Blue</div>

.pseudo::before{
    content: "hi";
}`
.pseudo::after {
    content: "!";
}