如何在 CSS 中防止浮动元素的父元素折叠?

htmlweb developmentfront end technology更新于 2024/7/19 7:40:17

为了防止浮动元素的父元素折叠，首先，我们将尝试了解问题所在。然后，我们将围绕以下示例进行操作:

浮动元素的父元素如何折叠?
使用 Overflow 属性防止浮动元素的父元素折叠
使用 Height 属性防止浮动元素的父元素折叠

浮动元素的父元素如何折叠

示例

首先，让我们了解浮动元素的父元素如何折叠。以下是示例 -

<html>
<head>
   <title>Example</title>
   <style>
      div{
         padding: 10px;   
      }
   </style>
</head>
<body>
   <h1>Nested Divs</h1>
   <div style="background-color: orange;">
      <div>One</div> 
      <div>Two</div>
      <div>Three</div>  
   </div>
</body>
</html>

输出

现在，为子 div 设置 float: left。这将导致父 div 折叠 -

<div style="background-color: orange;">
   <div style="float: left;">One</div> 
   <div style="float: left;">Two</div>
   <div style="float: left;">Three</div>  
</div>

输出

使用 Overflow 属性防止浮动元素的父元素折叠

现在让我们看看如何使用 Overflow 属性防止浮动元素的父元素折叠。我们已将 div 的 overflow 设置为 auto -

<div style="background-color: orange; overflow: auto">

示例

现在让我们看完整的示例 -

<html>
<head>
   <title>Example</title>
   <style>
      div{
         padding: 10px;   
      }
   </style>
</head>
<body>
   <h1>Nested Divs</h1>
   <div style="background-color: orange; overflow: auto">
      <div style="float: left;">One</div> 
      <div style="float: left;">Two</div>
      <div style="float: left;">Three</div>  
   </div>
</body>
</html>

输出

使用 height 属性防止浮动元素的父元素折叠

现在让我们看看如何使用 height 属性防止浮动元素的父元素折叠。我们已为 div 设置了 height 属性 -

<div style="background-color: orange;height: 40px">

示例

现在让我们看完整的示例 -

<html>
<head>
   <title>Example</title>
   <style>
      div{
         padding: 10px;   
      }
   </style>
</head>
<body>
   <h1>Nested Divs</h1>
   <div style="background-color: orange;height: 40px">
      <div style="float: left;">One</div> 
      <div style="float: left;">Two</div>
      <div style="float: left;">Three</div>  
   </div>
</body>
</html>