使用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

开启你的职业生涯

完成课程获得认证

开始学习
广告