浮动:不属于正常的流布局,通过设置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: ''}
正常显示: