在 CSS 中清除浮动的各种技术是什么？

在本文中，我们将学习各种清除浮动的技术。在深入探讨这个主题之前，我们将了解 CSS 中的float属性。 CSS 中的float属性用于改变元素的正常流动。 float 属性定义了元素在容器中的位置（右或左）。

CSS中清除浮动的目的：我们清除float属性以通过防止重叠来控制浮动元素。

各种清除浮子的技巧

clear 属性： clear属性用于指定浮动元素的哪一侧不允许浮动。它设置有关浮动对象的元素的位置。该元素可以水平放置在另一个浮动元素旁边的空间中。我们必须以与浮动相同的方向将clear属性应用于该元素，以便该元素将向下移动到浮动元素下方。

句法：

clear: none|left|right|both|initial;

属性值：

• none： clear属性的默认值。使用此值后，元素将不会被向左或向右推送浮动元素。
• right：这个值将元素推到浮动元素的正下方。
• left：此值将元素向左推到浮动元素的下方。
• both：此值将元素左右推到浮动元素。
• 初始：将属性更改为其默认值。
• 继承：将浮动属性继承到其父元素。

示例：在此示例中，我们使用 clear 属性的 left 值来指定段落元素不允许在左侧浮动，而与其他浮动元素有关。

HTML

  

    

  

    
clear property
  
    
    

        This will specify that paragraph element
        is not allowed to float on the left side
        in relation to other element.
    

  

输出：

溢出方法： clearfix 是一种元素自动清除或修复其元素的方法，因此它不需要添加额外的标记。它通常用于浮动布局，其中元素浮动以水平堆叠。如果元素比包含它的元素高，则使用 CSS 的溢出属性，将其值设置为auto来克服和修复问题。

示例：在此示例中，有两个 HTML div元素的图像向右浮动。浮动图片的高度比包含图片的div元素高，所以图片会溢出到容器外。在类名为“ clearfix ”的第二个div元素中，我们为auto添加了溢出属性值来解决问题。

HTML

  

    

  

    
Without Clearfix
    

        
        A clearfix is a way for an element 
        to automatically clear or fix its 
        elements so that it does not need 
        to add additional markup. It is 
        generally used in float layouts 
        where elements are floated to be 
        stacked horizontally.
    
    
With Clearfix
    

        
        A clearfix is a way for an element to 
        automatically clear or fix its elements 
        so that it does not need to add additional
        markup. It is generally used in float 
        layouts where elements are floated to 
        be stacked horizontally.
    

  

输出：

ClearFix Hack：它是clearfix的新现代 hack，因为它使用起来更安全。使用overflow: auto我们必须相应地调整边距和填充，否则它将创建滚动条。因此，最好使用新的现代clearfix hack。此方法使用 CSS ::after 伪选择器来清除浮动。

句法：

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

示例：在此示例中，有两个 HTML div元素的图像向右浮动。在这个例子中，我们制作了两个带有向右浮动图像的 HTML div元素。但是浮动图像的高度比包含该图像的div元素高，因此图像会溢出其容器之外。它发生在第一个 HTML div 元素中。在类名为“clearfix”的第二个div元素中，我们使用了 clearfix hack 来解决问题。

HTML

  

    

  

    
Without Clearfix
  
    

        This image is floated to the right.
        It is also taller than the element
        containing it, so it overflows 
        outside of its container:
    
  
    

        
        Without adding clearfix hack
        to the containing element
    
  
    

        With New Modern Clearfix
    
      
    

        
        Add the clearfix hack to the containing
        element, to fix this problem:
    

  

输出：