[HTML / CSS] float / grid / clear

 

 

 

 

 

 

 

이런 디자인의 글을 쓰고 싶다면 float를 활용해야한다. 사진이 있는 공간 밖으로 글을 채우주는 형식을 만들어주기 위함이다.

지금 이글도 float형식을 활용했을 것이다.

 

 

 

🤔 Grid 처럼 표현을 하기 위해서도 float가 사용되는데 float 적용시 이 각 block들이 어떻게 적용되는지 보자.

 

 

float는 앞서 본것과 같이 사진이나 블록이 추가되고 남는 공간이 있으면 그곳에다 내용을 덧붙이는데 

float가 사용되지 않았다면 

 

이렇게 div에 의한 block처리로 인해 각각 다른 줄로 넘어가게 될 것이다.

하지만 float를 사용하면 저 위의 결과 처럼 남는 공간에 붙여짐으로써 grid형식이 되는 것이다.

 

🤔 clear은 지정해준 지점에 떠있는 것이 없도록 하는 것이다.

 

grid div는 clearfix가 있기전 안에 있는 붕 떠있는 요소들을 인식하지 못해서 세로길이가 0px가 되어있는 상태였다.

그래서 테두리도 위에 선처럼 그어있게 되었다.

clear:left를 적용해줄시 왼쪽에 붕떠있는 요소가 없도록 한다. 그러므로 float된 요소 밑으로 내려오게 된다.

그러면 grid div는 clearfix div를 포함시키기 위해 세로길이를 늘린다.

문단은 이 밑에 표현되게 된다.