가로배치(inline, inline-block, flex, grid, float)

요소 가로배치 하고 싶을 때

 

1. display:inline

단점: width, height, padding-top, padding-bottom, margin-top, margin-bottom 등을 줄 수 없다.

 

 

 

2. display:inline-block

 

 

 

3. display:flex;

 

 

 

 

4. display:grid;

 

 

 

 

5. float: left | right

 

문제점.

만약 ul의 자식인 li들에게 float:left를 주면 ul의 height이 0이 되어버릴 것...

 

이 문제를 해결하기 위해

 

첫 번째 방법은

ul{
	overflow:hidden;
}

 

 

 

아니면

ul::after{
	content:'';
	display:block;
	clear:left;
}

 

이렇게 ul의 가상 element 자식을 만들어준다.

그러면 ul의 height가 다시 생기면서 layout이 제대로 잡힌다. 

 

(참고로 가상 element 만들 때, 빈 문자열이라도 content 속성을 반드시 넣어줘야 한다.

그리고 float로 인한 레이아웃 붕괴를 막기 위해 사용하는 clear:left는 반드시 display:block도 같이 써줘야 먹힌다.)