190408_TIL(Float, Clearfix)

4월 8일 (월)

수업시간에 float 만을 활용하여 layout을 잡는 연습을 하였다. float 란 일반적인 흐름(normal flow)를 벗어나 부모 요소의 왼쪽이나 오른쪽에 배치하는 것이다. float로 요소를 배치하는 것은 상당히 까다로운 일인데 그 이유는 다른 요소의 배치에 영향을 미치기 때문이다.

float가 배치에 영향을 미치는 것을 해제하기 위한 속성이 clear이다. clear 속성 같이 반복적으로 사용되는 속성을 css에서 임의의 클래스로 만들어 html 태그 class 값으로 주어 사용하는데 이를 css 모듈화 라고 한다.

clear 속성을 모듈화 하는 것은 이미 보편적으로 사용하고 있고 clearfix라는 명칭도 있다. clearfix는 임의의 클래스에 ::after와 같은 가상요소를 넣고 빈 블럭을display:block으로 만들고 clear: both를 사용하여 float 속성 값을 초기화하는 것이다.

다만, clearfix는 float 했을 시 부모가 자식 요소의 높이를 잃어버리는 것을 방지하기 위해 부모요소에 적용하는 것이다. 형제 레벨에서는 clear: both; 속성을 이용하여 float된 객체 만큼의 margin을 추가하여 겹치지 않게 해야한다. float 속성에 대하여 여러모로 공부를 좀 했지만 아직도 많은 부분 부족한거 같다. 생활코딩 강의 등을 통하여 좀 더 확실히 배워야겠다.

• clearfix참고
• CSS모듈참고