이유는 여러가지겠죠

 

먼저 display 속성을 살펴봅시다.

 

모든 태그는 display 속성이 있어요.

 

block              ,        inline

 

block 타입은 한 줄을 차지함니다. 무조건 1줄을 차지해요

 

inline은 자리가 남으면 그뒤로 계속 태그를 추가 할 수 있어요.

 

 

 

여기 까지라면 우리 생각대로 모양이 나와야 하는데 안그럴것이야.

 

왜냐하면 inline 속성값을 가지면 margin, padding 값이 적용이 안됨니다.

 

그래서 크기가 맘대로 우왕 ㅋ

 

margin과 padding 을 적용하려면

 

display:block;

 

으로 해서 블록 형태로 바꿔주도록 합시다.

 

주의사항  

 

블록타입은 인라인 타입을 감쌀수 있지만

인라인 타입은 블록타입을 감쌀수 없습니다.

 

 

두번째로 float 속성  

 

하위 태그에 float 속성이 있으면

 

그 상위 태그는 높이를 잡지 못한다.

 

<div>

 <p style="float:left;">하잉 </p>

</div>

<div>

<p> 안녕핬ㅇ</p>

</div>

 

이경우 div는 높이를 잡지못해서 높이가 없게되고

밑에있는 div가 자리를 치고 올라온다.

 

이렇게 높이를 잡지못하면 테두리(border)도 병1신같이 그리고

백그라운드 이미지도 병1신같은 위치ㅔ 그려지고...

 

이럴땐

1.부모태그의 height 속성값에 값을 주어 크기를 지정 하거나

2.부모태그의 속성에도 float속성을 주면된다.

3.  :after 라는 가상 선택자를 활용한다.

 

근데 그 부모의 부모가 있으면

그놈도 float을 해야되고 그 float이 float을 부른다는것을 염두해두고 짜야한다.

 

3번은 조금 어려우니 설명하자면.

 

<a>

   <b> </b>

   <c></c>

</a>

인데. b가 float : left ,   c가 float : right 이라면. a는 높이를 못잡는다.

 

이경우

a:after{  불라불라 } 라고 하면

 

</a> 태그 밑에 하나의 가상 태그가 추가되는거다. 그냥 가상태그만 추가되봐야 없던 높이가 생기진 않는다. 그러니 아래와같이 스타일을 지정하자.

 

a:after{ content: "";          display:block;        clear: both; }

컨텐츠가 비면 빈컨텐츠라 크기가 없다. 그래서 높이를 못잡아줌 ㅠㅠ 빈문자열이라도 넣자.

디스플레이 타입이 inline이면 한줄 차지를 않기때문에 역시 높이를 못잡아준다.

clear : both 이전에 다루었던 내용이다. 위쪽에 float 속성이 있을경우 덮쳐서 겹쳐지지않고

그 밑에 위치한다.

 

위와같은 스타일 속성을 삽입하면 크기가 문제없이 지정된다.

 

 

float 속성에 하나더 말하자면 

 

 

이건 자기를 감싸고있는 태그만 호구로 만드는게 아니라

밑에 있는 태그가 위로 올라오게 만든다.

 

그럴땐 clear : left(right, both)속성을 사용하자.

 

<p style="float:left;">하잉 </p>

<p style="clear:left">메롱</p>  //이렇게 clear을 맞춰서 사용해주면 된다. 그럼 겹치지 않고 바로 밑에 붙어서 시작한다. 만약 위에 float 형식이 2종류가 다있으면 both를 사용하면된다.