Float 사용 시, 자식 요소가 부모 요소의 범위를 벗어날 때 해결하는 방법 3가지를 공유하려 합니다!
사실 내가 까먹을까봐 기록하는 것이지요 ㅎㅎ
먼저 아래와 같은 코드를 봅시다!
1. container 라는 클래스명을 가진 부모요소 내에 자식 요소(item1 ~ item4)가 있습니다.
2. 부모요소(container)에 height(높이)값은 지정하지 않았기 때문에, 자식요소의 text높이 만큼이 부모의 높이가 될 것입니다.
3. 부모요소(container) padding 속성을 주었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.container {
width: 200px;
margin: 500px auto;
background-color: pink;
padding: 20px;
}
.item {
height: 10;
}
.item1 {
background-color: rgb(249, 181, 246);
}
.item2 {
background-color: rgb(249, 100, 246);
}
.item3 {
background-color: rgb(245, 22, 233);
}
.item4 {
background-color: rgb(203, 38, 38);
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
</div>
</body>
</html>따라서 코드를 실행하면 아래와 같이 블럭이 만들어집니다.
부모 요소에 padding 값을 주어 자식 요소들이 padding 영역 안으로 item들이 정렬된 것을 알 수 있습니다!
그럼 여기서 item3과 item4에 float:left와 float:right 속성을 각각 줘보겠습니다!
.item3 {
background-color: rgb(245, 22, 233);
float: left;
}
.item4 {
background-color: rgb(203, 38, 38);
float: right;
}이게 뭐람!! item3와 item4에 float속성을 주니까, 왜 padding 영역을 벗어나버린걸까요?!!
그건 float 속성 자체가 이름대로 둥둥 떠나니고 있기 때문에 부모의 영역을 벗어나버린거랍니다!
그럼 해결방법 3가지 알려드리겠습니다!
1. 부모 요소의 display 속성을 inline-block으로 바꾼다!(비추)
.container {
width: 200px;
margin: 500px auto;
background-color: pink;
padding: 20px;
display: inline-block; /*추가해보세요*/
}
2. 부모 요소에 overflow:hidden 값을 준다!(추천)
.container {
width: 200px;
margin: 500px auto;
background-color: pink;
padding: 20px;
overflow: hidden; /*추가해보세요*/
}
3. 가상 요소 ::after를 사용한다!
* 여기서 clear:both는 float 속성값인 left, right 모두를 해제한다는 의미입니다.
.container {
width: 200px;
margin: 500px auto;
background-color: pink;
padding: 20px;
}
/* 추가해보세요 */
.container::after {
content: "";
display: block;
clear: both;
}
'CSS' 카테고리의 다른 글
| CSS Selector - 가상 클래스 선택자(Pseudo class selector), nth-last-child가 내 맘대로 되지 않을 때 (2) | 2022.09.17 |
|---|
