HTML,CSS[2020.05.04 float 복습]

float

=공간을 최소한으로 차지 하되  가로정렬한다.

 

!!block 요소만 float 요소를 무시한다. !!

 

4개의 div 블럭을 모두 가로정렬 해보자

width:25%,  display:inline-block

1. 4개의 블럭 너비를 25% display를 inline-block 을 줬는데도 가로에 모두 정렬되지 않는다.

=inline-block 주변에는 항상 애매한 여백이 남기때문이다.

display를 block으로 바꾸어보았다 

2.display:block 요소는 한줄을 혼자 쓴다.

 

float을 사용해 보았다 .

3.float:left를 주어 모두 한줄에 가로 정렬 되었지만 부모인 section의 테두리 안에 가둬지지 않았다.

=section의 display는 block이기 때문에 float인 div를 무시한다.

 block요소만 float 요소를 무시한다 

 

해결법

4.::after를 이용해 section의 막내를 만들어주고 display:block,clear:both 를이용해 막내가 형들 밑에 깔리게끔 해준다.

 

 

*clear:both =float 계의 Enter(줄바꿈)