0515 / float & clear 속성 내용 정리

layout.css [ 선택자 내부의 끝에 이유불문 가상으로 태그 붙이기 ]

부모요소 높이값이 기본적인 수치(px, %)가 아닌 auto; 일 경우에,

float을 감싸고 있는 자식요소의 높이값을 임의로 늘리면, 정해져있는 부모요소 높이값보다 커지게 되므로

자식요소 높이값이 커졌을때, 부모요소 높이값은 0이 된다.

하지만 부모요소 값이 0이 되면 밑에 있는 다른요소 값과 겹치게 되버린다. 이러한 현상을 막기 위해

이러한 float을 사용하는 요소들 중에 마지막 요소에는 float이 아닌 clear:both를 사용한다.

clear:both 요소는 반드시 형태를 가지고 있어야 하며, 내용상 요소를 담을 수 없는 경우에는 가상의 요소로 처리한다.

이때 발생시키는 요소가 ::after 요소이다. ' ::after ' 속성에는 반드시 ' content=" "; ' 가 뒤따라 와야한다.

 

* (clear:both 요소는 html에서 인지 할 수 없다.)

* (javascript에서 ::after를 꾸며줄 수 없다.)