小程序开发中clear:both对float的作用

• 我们先看看它在DIV+CSS中的运用： 
• 1.浮动清理实现高度自适应，当浮动栏的高度变化时容器的高度会自动适应高度变化，否则可能发现容器不改变，浮动的栏则会出现排列混乱的结果。

2.

有css定义：p.f1{float:left;width :100px;}p.f2{float:left;width :400px;}则：

这个是第1项

这个是第2项

另起一行

以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

所以我们应改为:

如果不用清除浮动，那么第3个

的文字就会和第一二行在一起所以我们在第3个

加一个清除浮动。

这个是第1项

这个是第2项

另起一行

在小程序开发中的运用：

如果没有clear的作用，出现的现象如下图：

使用clear之后：

 
 
   
    
     
     提问者
    
   
 
 
   
    
     
     关注者
    
   
 
 
   
    
     
     我主页
    
   
 
 

.bod{
  display:flex;
  flex-direction:row;
  padding:10rpx;
  float:left;
 
}
 .item{
  display:flex;
  flex-direction:column;
  flex:1;
  border: 1rpx solid #eee;
  margin-top:20rpx;
  padding:30rpx;
  color:#000;
  cursor: pointer;
  width:120rpx;
  height:130rpx;
  
}
 .item image{
   width:80rpx;
  height:80rpx;
}
 .item text{
  flex:1;
  margin-top:15rpx;
  
}
.clear{clear:both;}