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

众所周知，像div 、段落、文本等 HTML 元素会自行增长以适应他们孩子的内容。但是，如果这些元素的子元素向右或向左浮动，则父元素可能会崩溃。也就是说，他们将失去他们的实际行为。

让我们通过一个例子来理解这一点：考虑下面的代码。在下面的程序中，一个绿色背景的父 div 有 6 个其他子 div 元素。没有父母或孩子在这里浮动。让我们编译并查看代码的输出。

    
    


    
    

  
        
        
HTML5
 
        
CSS3
        
JavaScript
        
Python
        
MySQL
        
MongoDB
        
  
    

                    

输出：

现在让我们让上面代码中的所有子 div 向左浮动，看看输出的差异：

    
    


    
    

  
        
        
HTML5
 
        
CSS3
        
JavaScript
        
Python
        
MySQL
        
MongoDB
        
  
    

                    

输出：

您可以在输出中清楚地看到父 div 已折叠并失去绿色背景。

有很多方法可以防止浮动元素的父元素在 CSS 中折叠：

• 方法一(使用Overflow属性)：我们可以利用CSS的overflow属性来防止父级崩溃。将父级的溢出属性的值设置为“自动”，它就不会再折叠了。让我们在上面显示的受影响的代码中应用它并查看结果。

  
  
  
      
      
  
  
      
      
      
  
    
          
          
  HTML5
   
          
  CSS3
          
  JavaScript
          
  Python
          
  MySQL
          
  MongoDB
          
    
      
  
                      
  

  输出：
  

• 方法二(Making parent浮动)：第二种方法是让父元素也根据子元素浮动。这也将有助于防止父级崩溃。但是一个缺点是你必须让所有的父母都浮动，即当前受影响的父母，当前受影响的父母的父母等等。

  现在，让我们将父级更改为根据其他子级 div 向左浮动并查看结果：

  
  
  
      
      
  
  
      
      
      
  
    
          
          
  HTML5
   
          
  CSS3
          
  JavaScript
          
  Python
          
  MySQL
          
  MongoDB
          
    
      
  
                      
  

  输出：
  

• 方法 3 (显式指定高度)：还可以明确固定折叠父级的高度以防止其折叠。此修复程序的问题是，如果将来调整浏览器大小或更改子项的大小，则父项可能有机会再次崩溃。

  
  
  
      
      
  
  
      
      
      
  
    
          
          
  HTML5
   
          
  CSS3
          
  JavaScript
          
  Python
          
  MySQL
          
  MongoDB
          
    
      
  
                      
  

  输出：
  

• 方法四(使用 display 和 clear 属性)： 也可以同时为 parent 使用 display和clear属性，防止折叠。指定“显示：表格； ”和“明确：两者； ” 为父并查看差异：

  
  
  
  
      
  
  
      
      
      
  
    
          
          
  HTML5
   
          
  CSS3
          
  JavaScript
          
  Python
          
  MySQL
          
  MongoDB
          
    
      
  
  
  

  输出：