Float는 '뜨다'라는 의미가 있다. 이와 같이 float를 설정하면 해당 요소가 동동 뜨기 때문에, 부모가 요소의 높이를 파악하지 못하는 경우에 아래와 같이 해결할 수 있다.
문제 발생
Float를 자식 요소에 사용 시, 부모 요소가 자식의 높이값을 인식하지 못함.
HTML
<div class="container">
<div></div>
</div>
CSS
.container{
border: 8px solid red;
}
.container div{
float: left;
width: 200px;
height: 200px;
border: 8px solid blue;
}
문제 해결
clearfix라는 클래서에 float요소를 지우는 clear를 넣어 부모 요소에 적용한다.
HTML
<div class="container clearfix">
<div></div>
</div>
CSS
.clearfix::after{
content: "";
clear: both;
display: block;
}
.container{
border: 8px solid red;
}
.container div{
float: left;
width: 200px;
height: 200px;
border: 8px solid blue;
}
'달밤에 코딩하기 > HTML CSS Tip!' 카테고리의 다른 글
헥사(HEX) 투명도(%) 적용하기 (0) | 2023.01.11 |
---|---|
미리 작성하면 좋은 코드 정리 (0) | 2021.08.20 |
CSS 이름 작명 규칙 (BEM) (0) | 2021.08.16 |
Placeholder 스타일 적용하기 (0) | 2021.08.15 |