Chúng ta bắt đầu từ đâu
Dưới đây là một số HTML và CSS soạn sẵn. Trong ví dụ của chúng tôi, chúng tôi có một phần tử cha với hai phần tử con nổi.
/* 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>
Giải pháp số 1: tràn: tự động
Một giải pháp hoạt động trong tất cả các trình duyệt hiện đại và trong Internet Explorer trở lại IE8 là thêm overflow: autovào phần tử cha. Điều này cũng hoạt động trong IE7, với thanh cuộn được thêm vào.
/* 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;
}
Giải pháp số 2: Container nổi
Một giải pháp khác hoạt động trong tất cả các trình duyệt hiện đại và quay lại IE7 là làm nổi bộ chứa chính.
Điều này có thể không phải lúc nào cũng thực tế, vì việc nổi div cha mẹ của bạn có thể ảnh hưởng đến các phần khác trong bố cục trang của bạn.
/* 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;
}
Phương pháp # 3: Thêm Div xóa các phần tử bên dưới
/*
* 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>
Phương pháp # 4: Thêm phần xóa Div cho phần tử cha mẹ
Giải pháp này khá dễ dàng cho các trình duyệt cũ hơn và các trình duyệt mới hơn.
/*
* 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>
từ https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/