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

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

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




    Floats and collapsing parents
    


    
    
  
        
        HTML5 
        CSS3
        JavaScript
        Python
        MySQL
        MongoDB

输出：

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




    Floats and collapsing parents
    


    
    
  
        
        HTML5 
        CSS3
        JavaScript
        Python
        MySQL
        MongoDB

输出：

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

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

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




    Floats and collapsing parents
    


    
    
    
  
        
        HTML5 
        CSS3
        JavaScript
        Python
        MySQL
        MongoDB

输出：

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

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




    Floats and collapsing parents
    


    
    
    
  
        
        HTML5 
        CSS3
        JavaScript
        Python
        MySQL
        MongoDB

输出：

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




    Floats and collapsing parents
    


    
    
    
  
        
        HTML5 
        CSS3
        JavaScript
        Python
        MySQL
        MongoDB

输出：

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




 Floats and collapsing parents 
    


    
    
    
  
        
        HTML5 
        CSS3
        JavaScript
        Python
        MySQL
        MongoDB

输出：