微信小程序

小程序wxss清除浮动教程

小程序wxss清除浮动教程

小程序的wxss也有浮动和清除浮动的布局,也就是支持float属性,也可以使用flex盒子模型来代替浮动的布局。
浮动不完全是定位,同时它也不是正常流布局,通过设置float属性,浮动的框可以向左或者向右移动,直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,文档的普通流中的会表现的浮动框不存在一样,其他内容会环绕过去,如图3-5所示。
图3-5 浮动示例
代码如下:
<view>
    文本文本文本文本文本文本文本文本文本文本文本<view
style="display:block; float:left; border:solid  1px; margin  :  20px; ">浮动框</view>文
    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
    本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>
上例中浮动区域在它当前的位置往左浮动,直至父元素内容框,其他文本都环绕而过。由于元素浮动时不在普通流中,这会导致父级元素忽略浮动元素高度,形成坍塌,如图3-6所示。
图3-6 浮动高度问题示例
代码如下:
<! -- 父级元素高度只会包含第一元素 忽略浮动元素 -->
<view style="border:solid 1px; ">
    <view>其他元素</view>
    <view style="float:left; ">浮动框</view>
</view>
本例中父级元素的边框并没有包裹浮动框,虽然这是浮动的一个特性,并不是一个bug,但在某些情况下我们仍然希望在使用浮动的同时,父级元素的高度能包裹浮动元素,这时我们就需要了解和浮动的另一个属性:clear(清除)。当设置元素clear时,可以确保当前元素的左边、右边或左右两边同时不能出现浮动的元素,如图3-7所示。
图3-7 清除浮动示例
代码如下:
<! -- 父元素会包含清除浮动元素 -->
<view style="border:solid 1px; ">
    <view>其他元素</view>
    <view style="float:left; ">浮动框</view>
    <! -- 设置当前元素左边不能出现浮动元素 -->
 
    <view style="clear:left; ">清除浮动元素</view>
</view>
<view style="border:solid 1px; margin-top:10px; ">
    <view>其他元素</view>
    <view style="float:left; ">浮动框</view>
    <view>不清除浮动</view>
</view>
在上例中有个特别有意思的现象,父元素虽然会忽略浮动元素(如浮动高度示例中产生的坍塌),但是不会忽略其他元素(包括清除浮动的元素),而清除浮动的元素总在浮动元素下方,所以在显示时视觉上父元素就把所有元素都包含进去了,如上例中无论非浮动元素在哪里,父元素边框都包含了非浮动元素。利用这个特性,如果把上例中清除浮动的高度置为0使其看不见,这时父元素仍然会包裹它,这样就能防止浮动元素父元素高度坍塌,网上利用after伪属性清除浮动就是这个原理。这里我们对比使用元素和after伪属性2种实现方案,如图3-8所示。
图3-8 清除浮动应用示例
WXML文件的代码如下:
<! -- 添加高度为0的元素清除浮动 -->
<view style="border:solid 1px; ">
    <view>其他元素</view>
    <view style="float:left; ">浮动框</view>
    <view style="clear:both; height:0; "></view>
</view>
<! -- 利用伪属性在后面插入一个元素清除浮动 -->
<view style="border:solid 1px; margin-top:10px; " class="clearfix">
   <view>其他元素</view>
    <view style="float:left; ">浮动框</view>
</view>
<! -- 不清除浮动对比 -->
<view style="border:solid 1px; margin-top:10px; ">
    <view>其他元素</view>
    <view style="float:left; ">浮动框</view>
</view>
.WXSS文件的代码如下:
/* 一定要设置content,否则元素不会显示 */
.clearfix:after { display:block; height : 0; clear : both; content : '' }
在实际项目中,为了复用性和便捷性,我们通常使用.clearfix类清除浮动。
 

最近文章: