解释CSS中清除浮动的目的

在本文中，我们将学习清除浮动以及在 CSS 中清除浮动的目的。在深入探讨这个话题之前，我们将了解 CSS 中的 float 属性。 CSS 中的 float 属性用于改变元素的正常流动。 float 属性定义元素放置容器的左侧或右侧的位置。

CSS 中清除浮动的目的：我们清除浮动属性以通过防止重叠来控制浮动元素。在我们的网页上，如果一个元素水平放置在浮动元素旁边，除非我们应用与浮动方向相同的 clear 属性，否则元素将移动到浮动元素下方。

句法：

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

属性值：

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

理解 clear概念的最佳方法是使用示例。

示例 1：我们在文本左侧浮动了一个图像，如下所示。我们可以看到，由于使用了 float属性，元素被左推到了图像上。

HTML

  

    

  

    
The clear Property
    
  
    

        The content will be shown 
        left to the image.
    

  

输出：

示例 2：一旦我们使用带有左值的 clear 属性，元素将被推到图像下方。

HTML

  

    

  

    
The clear Property
    
  
    

        The content will be shown 
        left to the image.
    

  

输出：