float는 요소를 붕 띄워서 왼쪽으로 정렬하게끔 해주는 속성이다.
예를 들어
과 같은 화면을 만들고자 할 때
html 코드가
이고
CSS 코드를
이렇게만 쳤을 때 화면은
이렇게 되버린다.
이것은 div 태그가 block 속성을 가지고 있기 때문에
나타나는 현상이다.
따라서
나머지 코드는 그대로이고,
left_container와 right_container에 float: left; 속성을 추가하면
.container_wrapper {
width: 800px;
}
.header {
width: 100%;
height: 50px;
background: aquamarine;
}
.left_container {
width: 20%;
height: 400px;
background: cornflowerblue;
float: left;
}
.right_container {
width: 80%;
height: 400px;
background: coral;
float: left;
}
화면은 이렇게 되는데
footer가 보이지 않는다.
그런데 개발자 도구를 켜서 footer를 확인해보면
footer는 존재하지만
이렇게 left_container와 right_container의 아래에 있는 것을 확인할 수 있다.
이것은 float가 붕 띄우는 속성이기 때문에 붕 뜬 left_container와 right_container 아래에
footer가 존재하게 된 것이다.
이러한 현상을 방지하기 위해
footer에 clear: both; 속성을 적용하면
.container_wrapper {
width: 800px;
}
.header {
width: 100%;
height: 50px;
background: aquamarine;
}
.left_container {
width: 20%;
height: 400px;
background: cornflowerblue;
float: left;
}
.right_container {
width: 80%;
height: 400px;
background: coral;
float: left;
}
처음에 의도한 화면을 만들 수 있다.
clear: both; 속성은 float 속성으로 인해 발생할 수 있는 현상을 방지하는 기능을 한다.
정리하자면
float 속성을 쓰고 나서 다음에 오는 요소는 clear를 주는 게 좋다.
참고 : 코딩애플 강의
'Front-end > CSS' 카테고리의 다른 글
| [CSS] 글자 스타일링 방법 (0) | 2022.05.19 |
|---|---|
| 시멘틱구조 태그 (0) | 2022.03.11 |
| Flex, Justify Content (0) | 2022.03.09 |
| CSS 선택자 (0) | 2022.03.09 |
| margin auto auto; 와 text-align: center;의 차이점 (0) | 2022.03.02 |