联系我们 - 广告服务
您的当前位置:主页 > 布局 > 基本知识 >

浮动

来源:未知 编辑:admin 时间:2018-01-17
导读: 浮动不完全是定位,同时它也不是正常流布局,通过设置float属性,浮动的框可以向左或者向右移动,直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,文档的普通流中的会表现的浮动框不存在一样,其他内容会环绕过去,如图所示
浮动不完全是定位,同时它也不是正常流布局,通过设置float属性,浮动的框可以向左或者向右移动,直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,文档的普通流中的会表现的浮动框不存在一样,其他内容会环绕过去,如图所示。
                                                             
代码如下: <view>     文本文本文本文本文本文本文本文本文本文本文本<view style="display:block;float:left;border:solid 1px;margin : 20px;">浮动框</view>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 </view>  上例中浮动区域在它当前的位置往左浮动,直至父元素内容框,其他文本都环绕而过。由于元素浮动时不在普通流中,这会导致父级元素忽略浮动元素高度,形成坍塌,如图a所示。代码如下: <!-- 父级元素高度只会包含第一元素 忽略浮动元素 --> <view style="border:solid 1px;">      <view>其他元素</view>      <view style="float:left;">浮动框</view> </view> 本例中父级元素的边框并没有包裹浮动框,虽然这是浮动的一个特 本例中父级元素的边框并没有包裹浮动框,虽然这是浮动的一个特性,并不是一个bug,但在某些情况下我们仍然希望在使用浮动的同时,父级元素的高度能包裹浮动元素,这时我们就需要了解和浮动的另一个属性:clear(清除)。当设置元素clear时,可以确保当前元素的左边、右边或左右两边同时不能出现浮动的元素,如图b所示。
                                                                                                                   如图a
                                                                
                                                                                                               如图b
                                                               
  码如下: <!-- 父元素会包含清除浮动元素 --> <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种实现方案,如图所示。
                                                           
 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类清除浮动。
                                                                                                                                                                                                                                                                                                 关键词:哈尔滨小程序
责任编辑:admin

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:浮动和定位
下一篇:定位

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © Tricks资讯网 版权所有
本站所有资讯来源于网络 如有侵权请联系QQ:940910888 技术支持鹏博科技
Top