우리가 시작하는 곳
다음은 상용구 HTML 및 CSS입니다. 이 예에서는 두 개의 부동 자식 요소가있는 부모 요소가 있습니다.
/* The CSS you're starting with may look similar to this.
* This doesn't solve our problem yet, but we'll get there shortly.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>
솔루션 # 1 : 오버 플로우 : 자동
모든 최신 브라우저와 Internet Explorer에서 IE8로 돌아가는 솔루션 overflow: auto은 부모 요소 에 추가 하는 것입니다. 이것은 스크롤 막대가 추가 된 IE7에서도 작동합니다.
/* Our Modified CSS.
* This is one way we can solve our problem.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
overflow: auto;
/*This is what we added!*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
솔루션 # 2 : 플로트 부모 컨테이너
모든 최신 브라우저에서 작동하고 IE7로 돌아가는 또 다른 솔루션은 부모 컨테이너를 플로팅하는 것입니다.
부모 div를 플로팅하면 페이지 레이아웃의 다른 부분에 영향을 줄 수 있기 때문에 항상 실용적이지는 않을 수 있습니다.
/* Modified CSS #2.
* Floating parent div.
*/
.containing-div {
background-color: #d2b48c;
display: block;
float: left;
/*Added*/
height: auto;
width: 100%;
/*Added*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
방법 # 3 : 플로팅 된 요소 아래에 지우기 div 추가
/*
* CSS to Solution #3.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clear {
clear: both;
}
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
<div class="clear"></div>
</div>
방법 # 4 : 부모 요소에 Clearing Div 추가이
솔루션은 구형 브라우저와 최신 브라우저 모두에 대해 방탄 효과가 있습니다.
/*
* CSS to Solution #4.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clearfix {
clear: both;
}
.clearfix:after {
clear: both;
content: "";
display: table;
}
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>
에서 https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/