본 게시글은 개인 공부를 하면서 기록 목적으로 작성한 내용입니다.
잘못된 내용이 있다면 제보 부탁드립니다. 🙇♂️
1. 플로팅(Floating) 레이아웃 이란?
- float 속성을 사용해 박스를 왼족 또는 오른쪽으로 “부유" 시키는 레이아웃 기법이다.
2. Float 요소의 특징
- 부모는 float이 적용된 자식만 가지고 있을 때에는 높이를 인식할 수 없다.
- float은 clear라는 속성을 가진 자식 요소가 있을 때 높이를 인지할 수 있다.
3. 높이 인식 방법
- 부모 요소에 overflow: auto; 속성 주기
- (권장) 가상 요소에 clear: both; 속성을 주기
- (최신문법) 부모 요소에 display: flow-root; 속성을 주기
.clearfix::after {
content: '';
display: block;
clear: both;
/* 만약, content가 있을 경우 hidden과 height 높이를 지정하여 화면에서 없애준다. */
visibility: hidden; /* 화면에서 안보이게 하는 속성 */
height: 0; /* 가상요소의 높이를 0으로 만들어준다. */
}