float
현재는 1차원 수평 정렬로 Flex를 많이 사용하지만 예전에는 float속성을 많이 사용했기 때문에 예전에 만들어진 프로젝트를 진행하면 float를 만날 수 있기 때문에 알아야된다. 또한 float를 사용한다면 몇 요소들은 display속성이 block으로 변한다.
clearfix 활용
float 자식 요소들을 담고 있는 컨테이너가 온전하게 사용되려면 가상요소선택자 after를 활용해서 both로 float를 모두 제거해야된다. 주의할 점 float로 선언된 요소들끼리만 묶어야 된다.
1
2
3
4
5
.clearfix::after{
content:'';
display: block;
clear: both;
}
Position
속성 값 중 fixed라면 조상 요소 중 transform, perspective, filter 속성이 존재한다면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다. fixed, absolute는 인라인으로 선언되어있어도 block으로 만들어주는 기능을 한다.
쌓임 맥락
z-index를 활용해 css로 요소들이 어떻게 쌓이는지 나타낼 수 있다. 하지만 언제나 사용할 수 있는 것이 아니고 flex, grid, position, transform, opacity등 설정됐을 때 가능하다. 쌓임맥락 참고