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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27187991/article/details/65633474

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

2.

有css定义：p.f1{float:left;width :100px;}p.f2{float:left;width :400px;}则：<p class="f1">这个是第1项 </p><p class="f2">这个是第2项 </p><p >另起一行</p>

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

所以我们应改为:

如果不用清除浮动，那么第3个<P>的文字就会和第一二行在一起所以我们在第3个<P>加一个清除浮动。<p class="f1">这个是第1项 </p><p class="f2">这个是第2项 </p><p clear:both;>另起一行</p>

在小程序开发中的运用：

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

使用clear之后：

 <view class="flex-board">
 <view class="bod">
   <navigator url="url">
    <view class="item">
     <image src="../../image/usbox.png" mode="aspectFill"></image>
     <text>提问者</text>
    </view>
   </navigator>
 </view>
 <view class="bod">
   <navigator url="url">
    <view class="item">
     <image src="../../image/featured.png" mode="aspectFill" ></image>
     <text>关注者</text>
    </view>
   </navigator>
 </view>
 <view class="bod">
   <navigator url="url">
    <view class="item">
     <image src="../../image/home.png" mode="aspectFill"></image>
     <text>我主页</text>
    </view>
   </navigator>
 </view>
 <view class="clear"></view>
</view>

.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;}