css浮动(float)属性

CSS浮动属性是一个常用的布局属性，用于控制元素在页面中的位置。通过设置浮动属性，可以将元素从页面的正常文档流中移动到页面的左侧或右侧，使得其他元素可以围绕它进行布局。

属性	描述	值
clear	指定不允许元素周围有浮动元素。	left right both none inherit
float	指定一个盒子（元素）是否可以浮动。	left right none inherit

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边。

常用的CSS浮动属性包括：

1. float:left/right：设置元素向左或向右浮动。
2. clear:both：清除元素浮动。
3. overflow:hidden：防止浮动元素影响到其他元素的布局。
4. display:inline-block：将元素设置为行内块元素，可以使得元素之间没有空白缝隙。
5. position:relative/absolute：和浮动结合使用可以实现复杂的布局效果。

需要注意的是，浮动属性会影响到其他元素的布局，需要适当地设置清除浮动或使用其他布局属性来避免影响。另外，浮动属性在不同浏览器中的表现可能会有差异，需要进行适当的hack处理。

清除浮动

清除浮动是为了解决浮动元素对其他元素造成的影响，通常使用CSS中的clear属性来实现。

常用的清除浮动方法有以下几种： 

1. 使用clear属性：在浮动元素后面添加一个空元素，设置clear:both属性。

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

   在父容器中加上 class="clearfix"，即可实现清除浮动。
    
2. 父级div使用overflow属性：可以将父元素设置为overflow:hidden或overflow:auto。

   .parent {
       overflow: hidden; /* 或者overflow: auto; */
   }
   

3. 使用布局属性：父元素使用flexbox或grid布局可以避免浮动造成的影响。

   .parent {
       display: flex;
       /* 或者 */
       display: grid;
   }
   

使用以上三种方法都可以清除浮动，需要根据具体情况来选择适当的方法。