为什么容器元素包含浮动元素时高度不会增加?

htmlweb developmentfront end technology更新于 2024/7/25 14:04:17

为了解决这个问题，我们需要使用 overflow 属性，并将其设置在外部父 div 上。我们有一个内部子 div 和一个外部父 div -

<div class="outer">
   <div class ="inner">
   </div>
</div>

外部父级 div 设置了以下 CSS 样式。最小高度 (min-height) 设为 100px，溢出 (overflow) 属性设为 auto。这样，即使容器元素包含浮动元素，其高度也不会增加 -

.outer {
   margin: 0 auto;
   width: 960px;
   min-height: 100px;
   background-color:yellow;
   overflow:auto;
}

我们上面讨论的浮动元素，在内部子 div 中使用 float: right 属性进行设置。以下是内部 div 的样式 -

.inner {
   width:500px; 
   height:200px;
   background-color:blue;
   float:right;
}

示例

让我们看一个例子 -

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer {
         margin: 0 auto;
         width: 960px;
         min-height: 100px;
         background-color:yellow;
         overflow:auto;
      }
      .inner {
         width:500px; 
         height:200px;
         background-color:blue;
         float:right;
      }
   </style>
</head>
<body>
   <div class="outer">
      <div class ="inner">
      </div>
   </div>
</body>
</html>