資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用CSS修復塌陷的父元素
開發者使用CSS浮動屬性時遇到的眾多問題之一是，如果所有子元素都浮動，則父容器將塌陷。為了避免父容器塌陷，我們可以使用以下解決方案之一。
問題
由於所有內容都在其內部浮動，因此父容器已塌陷。由於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: 20px;
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>
</head>
<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>
解決方案1
我們可以將CSS float: left應用於浮動元素的父容器。
此解決方案在一定程度上解決了問題，因為現在父元素的父元素已塌陷，並且浮動內容的父元素環繞在子元素周圍。
以下是解決方案1的輸出：
解決方案2
我們可以在浮動元素的父容器上使用CSS overflow屬性。此解決方案效果很好，但由於缺乏邏輯推理而未使用。
以下是解決方案2的輸出：
解決方案3
我們可以在父容器底部新增一個空div，其類名為“clearfix”，內容如下。
.clearfix {
clear: both;
}
此解決方案解決了問題，但現在父容器底部存在一個表示空內容的空div元素。
以下是解決方案3的輸出：
解決方案4
我們可以向父容器新增一個使用偽元素“after”的類，內容如下：
.clearfix {
.clearfix::after {
content: '';
display: table;
clear: both;
}
以下是解決方案4的輸出：
更新於：2023年11月2日
瀏覽量：580
廣告