CSS 中的 float 属性是什么？

在本文中，我们将通过所有可用属性的合适示例了解 CSS 浮点属性。

float 属性用于改变元素的正常流动。它定义了元素应该如何浮动并将元素放置在其容器的右侧或左侧。

float 属性的一般语法。

float: none|inherit|left|right|initial;

注意 – float 属性的默认值为 none，它不适用于绝对定位的元素。

浮点数的属性值

Value	Description
none	It is the default value of a float property. The element must no float.
inherit	property must be inherited from its parent element.
left	Place an element on its container’s right.
right	Place an element on its container’s left.
initial	Property is set to its default value.

使用左浮点值的浮点属性示例。

在下面的示例中，我们使用左侧的浮点值。使用此值后，元素必须留在其容器上，如下图所示。

向左飘浮

HTML

    
    


    

        
 float left...
          
The below picture must be left on its container.
  
      
          
The GeeksforGeeks is the portal for geeks
   that contain computer science and programming 
  articles. 
  
    

使用浮动值正确的浮动属性示例。

在下面的示例中，我们正确使用浮点值。使用此值后，元素必须位于其容器上，如下图所示。

浮动：右

HTML

    
    


    

        
 float right...
          
The below picture must be right on its container.
  
       
        
The GeeksforGeeks is the portal for geeks
    that contain computer science and
    programming articles. 
  
    

                    

具有绝对定位元素的浮动属性。

在下面的示例中，我们将看到 float 属性不适用于绝对定位的元素。

位置：绝对；

HTML

    
    


    

        
 float with absolutely positioned element.
            
floating won't work
  
        
          
The GeeksforGeeks is the portal for 
    geeks that contain computer 
          science and programming articles. 
  
    

                    

CSS float 属性在 flexbox 和 grid 之前使用。今天我们想要一个适合移动设备的网站。 flexbox 比浮动更高效。

这些是在浮动上使用 flexbox 的以下原因。

1. 使用 flexbox 定位子元素变得更容易。
2. flexbox 响应迅速且适合移动设备。
3. flex 容器的边距不会与其内容的边距一起折叠。
4. 我们可以轻松更改网页上元素的顺序，甚至无需更改 HTML。

结论 –在本文中，我们学习了 CSS 浮点属性以及可用的值和合适的示例。