微信小程序开发之清除浮动坍塌两种方式_小程序开发 position: fixed;清楚浮动_一只小小小蜜蜂的博客-程序员秘密

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

正常显示：

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

本文链接：https://blog.csdn.net/android_gogogo/article/details/72377111

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Linux高性能服务器设计_阿里云云栖号的博客-程序员秘密

C10K和C10M计算机领域的很多技术都是需求推动的，上世纪90年代，由于互联网的飞速发展，网络服务器无法支撑快速增长的用户规模。1999年，Dan Kegel提出了著名的C10问题：一台服务器上同时处理10000个客户网络连接。10000个网络连接并不会发送请求到服务器，有些连接并不活跃，同一时刻，只有极少的部分连接发送请求。不同的服务类型，每个连接发送请求的频率也不相同，游戏服务器的连接会...

java 创建mdi窗体_.Net创建MDI窗体 | 学步园_行走的瓶子Yolo的博客-程序员秘密

多文档界面 (MDI) 应用程序的基本元素是 MDI 子窗体，因为它们是用户交互的中心。在下面的过程中，将创建显示 RichTextBox 控件的 MDI 子窗体，该子窗体类似于大多数字处理应用程序。将 RichTextBox 控件替换为其他控件(如 DataGrid 控件或混合控件)使您得以创建各种可能的 MDI 子窗口(而且进一步扩展为 MDI 应用程序)。创建 MDI 子窗体创建菜单结构中包...

CDH问题集_weixin_30329623的博客-程序员秘密

1.在CM中添加主机报JDK错误手动在机器上安装oracle-jdk1.7+update64.然后在CM中选择不安装oracle-jdk即可.2.HostMoinitor无法与server联系查找了多方资料,依然没有找到问题./var/log/cloudera-scm-aget/下是日志文件/var/run/cloudera-scm-aget/是运行时文件最后从上面标黄色的地方感觉到是网络问题./...

百度富文本编辑器 html5,UEditor(百度富文本编辑器)的暴力使用_weixin_29094539的博客-程序员秘密

1.下载sdk Tip:这里下载的是UTF-8版本的。解压可以看到一个示例文件index.html，可以双击打开该文件，就可以看到富文本编辑器的示例：然后就是将该sdk放到你的需要的位置：你可以直接在演示文件index.html文件上做开发，但一般不会这样。这里将在其他的文件中引入该富文本编辑器。 2.引入必要文件2.1 参考演示文件index.html，可以知道需要引入的是如下文件： 2....

Java反向字符_allway2的博客-程序员秘密

Java反向字符串简介字符串是一个字符序列，是Java中的一个对象。在Java中，可以对String对象执行几种操作。常用的操作之一是字符串反转。反向的字符串称为反向字符串。例如，“ HAPPY”字符串可以反转为“ YPPAH”。同样，当反转时，“ LUCKY”字符串可以写为“ YKCUL”。Java中反向字符串背后的逻辑有几种方式可以反转字符串。对于每种方法，将使用单独的功能和循环。即使方法不同，字符串反转背后的基本过程也几乎类似，下面将对此进行介绍：使用代码或使用用户输入来输入字符.

Java企业级开发必备高级技术（WebLogic、Tomcat集群，Apach调优）_fengzhongyela的博客-程序员秘密

Java企业级开发必备高级技术（WebLogic、Tomcat集群，Apach调优）百度网盘地址：http://pan.baidu.com/s/1i5z6N4L 密码：vx39第一课（java虚拟机调优-入门讲解）第二课（java虚拟机调优-启动调优）第三课（java虚拟机调优03-jclasslib工具使用）第四课（java虚拟机调优04-虚拟机栈设置）第五课（jav...