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)」。