微信小程序界面设计入门课程-样式wxss中使用css课程-定位-浮动

Dear 丶 2024-02-19 16:03 28阅读 0赞

### 定位-浮动 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

**基础用法**  
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。  
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。  
CSS 浮动  
请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：  
![微信小程序界面设计入门课程-样式wxss中使用css课程-定位-浮动][-_wxss_css_-_-]

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。  
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。  
![微信小程序界面设计入门课程-样式wxss中使用css课程-定位-浮动][-_wxss_css_-_- 1]  
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

![微信小程序界面设计入门课程-样式wxss中使用css课程-定位-浮动][-_wxss_css_-_- 2]

### 小程序应用 ###

> Wxml代码

<view class='cls1'>
      <view  class='fk1'>区块1 </view>
      <view  class='fk2'>区块2 </view>
      <view  class='fk3'>区块3 </view>
    </view>
    
    <view class='cls2'>
      <view  class='fk21'>区块21 </view>
      <view  class='fk22'>区块22 </view>
      <view  class='fk23'>区块23 </view>
    </view>
    
    <view class='cls3'>
      <view  class='fk31'>区块31 </view>
      <view  class='fk32'>区块32 </view>
      <view  class='fk33'>区块33 </view>
    </view>
    
    <view class='cls4'>
      <view  class='fk41'>区块41 </view>
      <view  class='fk42'>区块42 </view>
      <view  class='fk43'>区块43 </view>
    </view>
    
    Wxss代码
    
    .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;
    }
    
    .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;
    }
    
    .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;
    }
    
    
    .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;
    }

效果如下图  
![微信小程序界面设计入门课程-样式wxss中使用css课程-定位-浮动][-_wxss_css_-_- 3]

[欢迎大家收看我的视频教程：微信小程序样式入门到精通(wxss,css)（微信小程序界面设计必备技能）][wxss_css]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-_-]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/232a6c3e0a7c477f9f1e58173c6857d8.png
[-_wxss_css_-_- 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6f93aeed3d6d4e7ab53e3854092b29d4.png
[-_wxss_css_-_- 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cb3de906892a4188a769d9f585d6c035.png
[-_wxss_css_-_- 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4b0115f986034c808e47857127b295eb.png
[wxss_css]: https://ke.qq.com/course/368613?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/081b9ae6a83045c5ab024c386c15fa0f.png