根据基础语法，下面在微信小程序中实现组件的浮动。

.wxml文件代码示例

小白教程网www.2d5.net

<!--第1区块-->
<view>
  <view  class='fk1'>区块1 </view>
  <view  class='fk2'>区块2 </view><!--将该区块向右浮动-->
  <view  class='fk3'>区块3 </view>
</view>
 
<!--第2区块-->
<view><!--定义向左浮动-->
  <view  class='fk21'>区块21 </view>
  <view  class='fk22'>区块22 </view><!--定义向右浮动-->
  <view  class='fk23'>区块23 </view>
</view>
 
<!--第3区块-->
<view>
  <view  class='fk31'>区块31 </view>
  <view  class='fk32'>区块32 </view><!--定义向右浮动-->
  <view  class='fk33'>区块33 </view>
</view>
 
<!--第4区块-->
<view>
  <view  class='fk41'>区块41 </view>
  <view  class='fk42'>区块42 </view><!--定义向左浮动-->
  <view  class='fk43'>区块43 </view>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

/* 第1区块样式定义 */
.cls1{
  padding: 10px;
}
.fk1{
  width: 50px;
  height: 50px;
  background-color: gainsboro;
}
.fk2{
  width: 50px;
  height: 50px;
  background-color: antiquewhite;
  float: right;/*向右浮动*/
}
.fk3{
  width: 50px;
  height: 50px;
  background-color:  gray;
}
 
/* 第2区块样式定义 */
.cls2{
  float: left;/*向左浮动*/
}
.fk21{
  width: 50px;
  height: 50px;
  background-color: gainsboro;
  display: inline-block;
 
}
.fk22{
  width: 50px;
  height: 50px;
  background-color: antiquewhite;
  float: right;/*向右浮动*/
  display: inline-block;
}
.fk23{
  width: 50px;
  height: 50px;
  background-color:  gray;
  display: inline-block;
}
 
/* 第3区块样式定义 */
.cls3{
    clear: both;
    padding: 10px;
}
.fk31{
  width: 50px;
  height: 50px;
  background-color: gainsboro;
  display: inline-block;
 
}
.fk32{
  width: 50px;
  height: 50px;
  background-color: antiquewhite;
  float: right;/*向右浮动*/
  display: inline-block;
}
.fk33{
  width: 50px;
  height: 50px;
  background-color:  gray;
  display: inline-block;
}
 
/* 第4区块样式定义 */
.cls4{
    clear: both;
    padding: 10px;
}
.fk41{
  width: 50px;
  height: 50px;
  background-color: gainsboro;
  display: inline-block;
 }
.fk42{
  width: 50px;
  height: 50px;
  background-color: antiquewhite;
  display: inline-block;
  float: left;/*向左浮动*/
}
.fk43{
  width: 50px;
  height: 50px;
  background-color:  gray;
  display: inline-block;
}

效果如图5-9所示。