微信小程序开发之清除浮动坍塌两种方式

浮动：不属于正常的流布局，通过设置float属性，浮动框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框为止。

浮动坍塌：浮动框没有被包含进父元素中

<view style="border:solid 1px;">
<view >其他元素</view>
<view style="float:left">浮动框</view>
</view>

显示如下：

原因分析：浮动区域在它当前位置向左浮动，直到父元素框，其他文本绕过。浮动元素不在普通流中，导致父元素忽略浮动元素高度，形成坍塌。

解决方式：

1、添加高度为0的元素清除浮动

<view style="border:solid 1px;">
<view >其他元素</view>
<view style="float:left">浮动框</view>
<view style="clear:both;height:0"></view>
</view>

2、利用为属性在后边插入一个元素清除浮动

<view style="border:solid 1px;" class="test">
<view >其他元素</view>
<view style="float:left">浮动框</view>
</view>

.test::after{display: block;height: 0;clear: both;content: ''}

正常显示：

这两种方式都可以，从代码复用性和使用方便考虑，使用第二种好点。