0x8、浮动与清除浮动
使元素脱离文档流，按照指定方向(左或右)移动，直到外边缘碰到包含框或另一个浮动框的边框为止。浮动前竖向排列，浮动后横向排列；float属性，可选值left左，right右。写个例子体验下，复用上面的wxml，然后设置新的样式：
/* test.wxss */ view > view { line-height: 100rpx; width: 140rpx; text-align: center; } .view-1 { background: greenyellow; } .view-2 { background: blueviolet; } .view-3 { background: orange; } .view-4 { background: pink; }
运行效果如下：
接着为元素1设置一个向右的浮动 float:right; 运行结果如下：
如图，元素1脱离了文档流(所占空间被删除)，然后浮动到右侧了，如果想调整元素1的位置，可以设置margin，比如这里设置margin-right:20rpx;
接着我们如果为元素2也设置一个向右的浮动：
按顺序排到了右侧，之所以没有像元素1一样贴着右边而是在元素1的左侧，因为碰到元素1浮动框了。接着为元素4页设置一个右浮动：
另外有一种情形要注意一下，把样式文件修改为：
/**index.wxss**/ view > view { line-height: 100rpx; width: 240rpx; float: left; text-align: center; } .view-1 { background: greenyellow; height: 140rpx; } .view-2 { background: blueviolet; } .view-3 { background: orange; } .view-4 { background: pink; }
包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”.
接着说下「清除浮动」，示例代码如下：
<!-- test.wxml --> <view class="view-wrapper"> <view class="view-1">元素1</view> <view class="view-2">元素2</view> </view>
/* test.wxss */ page { background: gray; } .view-wrapper { width: 75%; background: gold; padding: 10rpx; } view > view { width: 240rpx; text-align: center; } .view-1 { background: greenyellow; } .view-2 { background: blueviolet; } .view-3 { background: orange; } .view-4 { background: pink; }
运行结果如下：
接着为两个元素分别设置左和右的浮动，运行结果如下：
浮动带来的影响，可以为通过设置属性overflow: hidden; 来清除浮动。
除此之外还可以添加一个组件，然后设置clear:both实现相同的效果。
<view style="clear:both"/>
还有一种玩法：通过伪元素:after直接添加
.view-2:after { content: ""; display: block; clear: both; }
当然，你也可以直接写死容器元素的高度~
0x9、多列布局multi-column
CSS3新增了一个多栏布局，用来实现「文本多列」和「瀑布流」非常方便，就顺带讲下吧~
相关属性如下：
- column-rule-style：列与列间的边框样式；
- column-rule-width：两列的边框厚度；
- column-rule-color：两列的边框颜色；
- column-rule：上述所有属性的简写，示例: column-rule: 1px solid lightblue;
- column-count：创建多列，指定需要分割的列数；
- column-width：列的宽度；
- columns：column-width 和 column-count 的简写。
- column-gap：列与列间的间隙；
- column-span：是否跨多栏显示；
- column-fill：指定如何填充列；
文本多列的代码示例如下：
<!-- test.wxml --> <view class="view-wrapper"> <view class="view-1">大家好，我是练习时长两年半的个人练习生菜虚鲲，我喜欢唱，跳，rap，篮球，Music！</view> </view>
/* test.wxss */ .view-1 { columns:auto 5; column-rule: 5rpx solid lightblue; }
运行结果如下：
实现一个简易图片瀑布流示例如下：
//test.js，新增一堆图片URL Page({ data: { pics: [ "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg", "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg", "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg", "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg", "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=2958310391,871610286&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg", "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg", "http://img5.imgtn.bdimg.com/it/u=823139735,3514716232&fm=26&gp=0.jpg", "http://img4.imgtn.bdimg.com/it/u=529905932,1803087578&fm=26&gp=0.jpg", "http://img2.imgtn.bdimg.com/it/u=3924656228,1474918552&fm=26&gp=0.jpg", ] }, })
<!-- test.wxml，利用wx:for生成控件 --> <view class="content"> <block wx:for="{{pics}}"> <image src="{{item}}" mode="widthFix"></image> </block> </view>
/* test.wxss */ page { background: gray; } .content { columns: auto 3; width: 100%; column-gap: 5rpx; } image { width: 100%; display: block; box-sizing: border-box; padding: 5rpx; }
运行结果如下：
瀑布流是实现了，但是左下角的蕾姆酱被切成两半了，如果不想切断，可以为子元素设置「break-inside」属性来防止多列布局，分页媒体和多区域上下文中的意外中断。直接在image的样式里添加：
break-inside: avoid;
运行后结果如下：
0x10、flex弹性布局
学习完前面的内容，我们可以通过display，position，float来布局，但是灵活性较差。2009年，w3c提出了一种新的布局方案：flex弹性布局，可以简便、完整、响应式地实现多种页面布局。任何元素都可以开启弹性布局，采用Flex布局的元素，称为「Flex容器(flex container)」，它里面所有的子元素会自动成为容器成员，称为「Flex 项目(flex item)」。
留意下上面的「主轴」和「侧轴」，其实就是「水平」和「垂直」两个方向。
Flex的属性分为两个部分：「容器属性」和「项目属性」，具体如下图所示：
因为属性较多，限于偏于，也不一一展示具体效果了，Runoob上有对应的效果展示，读者请自行移步至：
www.runoob.com/cssref/css3…，查看学习：
最后再提下和flex有关的两点：
第一点
设置flex布局后，子元素的float，clear和vertical属性将失效！
第二点：
行内元素也可以使用Flex布局，设置display:inline-flex;即可。
0x0、布局实战：写个抠腚优鲜的首页
Tips：因内容太多，实战部分拆分到另一篇中：juejin.cn/post/684490…
小结
相信读者学完本节，基本可以应付日常小程序页面的堆砌了。这种实操性比较强的东西，切忌死记，建议自己找些小程序仿写下，熟能生巧，别说没有设计稿，没有图片没有尺寸，上节学的反编译技能呢？？？
笔者不是专业前端，以上内容都是现学现卖，如有纰漏或建议，欢迎评论区指出，谢谢~
源码整理下再丢Gayhub，后面再发个地址哈~
