CSS를 사용하여 접힌 부모 수정

<시간/>

CSS float 속성을 사용하는 동안 개발자가 직면하는 많은 문제 중 하나는 모든 자식 요소가 부동 상태이면 부모 컨테이너가 축소된다는 것입니다. 상위 컨테이너 축소를 방지하기 위해 다음 솔루션 중 하나를 사용할 수 있습니다.

문제

모든 콘텐츠가 내부에 떠 있으므로 상위 컨테이너가 축소됩니다. CSS background-color 속성으로 인해 컨테이너의 패딩만 보입니다.

예시

다음은 수정이 필요한 문제 코드입니다 -

<!DOCTYPE html>
<html>
<head>
<title>Avoid Parent Container Collapse</title>
<style>
body{
   background-color: grey;
   border: 4px solid black;
}
#navbar, #content{
   padding: 12px;
   color: white;
}
#navbar{
   background-color: #C303C3;
}
li {
   list-style: none;
   border: 2px solid black;
   width:4em;
   background-color: grey;
   text-align: center;
   float: left;
}
#content {
   background-color: #4CAF50;
}
#leftContent, #rightContent {
   border: 3px solid black;
   margin:2px;
}
#leftContent {
   width: 45%;
   float: left;
}
#rightContent {
   width: 45%;
   float: right;
}
</style>
<body>
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div id="content">
<div id="leftContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div id="rightContent">
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>

출력

다음은 문제에 대한 출력입니다. -

CSS를 사용하여 접힌 부모 수정

해결책 1

CSS float:left를 float된 요소의 상위 컨테이너에 적용할 수 있습니다.

이 솔루션은 이제 상위 요소의 상위 요소가 축소되고 플로팅된 콘텐츠의 상위 요소가 하위 요소 주위에 래핑되므로 문제를 기존으로 수정합니다.

다음은 솔루션 1 −

의 출력입니다.

CSS를 사용하여 접힌 부모 수정

해결책 2

부동 요소의 상위 컨테이너에서 CSS 오버플로 속성을 사용할 수 있습니다. 이 솔루션은 잘 작동하지만 논리적 추론이 부족하여 사용되지 않습니다.

다음은 솔루션 2 −

의 출력입니다.

CSS를 사용하여 접힌 부모 수정

해결책 3

'clearfix' 클래스를 사용하여 상위 컨테이너 내부 하단에 빈 div를 추가할 수 있습니다. 다음과 같은 내용이 있습니다.

.clearfix {
   clear: both;
}

이 솔루션은 문제를 해결하지만 이제 아무 것도 나타내지 않는 상위 컨테이너 내부의 맨 아래에 빈 div 요소가 있습니다.

다음은 솔루션 3 −

의 출력입니다.

CSS를 사용하여 접힌 부모 수정

해결책 4

의사 요소 'after'를 사용하는 클래스를 추가할 수 있습니다. 다음 내용을 가진 상위 컨테이너로 -

.clearfix {
.clearfix::after {
   content: '';
   display: table;
   clear: both;
}

다음은 솔루션 4 −

의 출력입니다.

CSS를 사용하여 접힌 부모 수정