float 너란 녀석... (5) (feat. parent::after)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

 

 

 

📝 메모

---

그래서 망가진 layout을 구원하는 방법에는 어떤 것들이 있는가?

 

 

 

 

 

1. 

.parent{
	overflow:hidden;
}

부모 요소에 overflow:hidden;을 준다.

 

 

 

 

 

 

 

 

2.

.parent::after{
	content:"";
	display:block;
	clear:left;
}


.child{
	float:left;
}

 

부모 요소에 ::after을 이용해서 마지막 (가상의) 자식을 하나 더 만들어 준다.

 

 

::after을 사용할 때

- 비어있는 문자열이라도 괜찮으니 content:"" 속성은 반드시 넣어준다.

- clear:left를 사용하기 위해서 그 요소는 반드시 display:block이어야 한다.

 

 

 

 

 

 

 

이 방법들을 사용하면 parent element가 다시 height를 가지게 되서

망가졌던 layout이 원하는 대로 챡챡- 배치된다.