基本信息

---

下载

文档摘要

---

微信小程序开发

北方工业大学

案例

Float页面布局

案例描述

设计一个小程序，利用float布局实现相应的

布局效果。

实现效果

案例实现

电脑录屏

知识要点

本案例主要使用了float和clear属性进行布局，

利用margin属性实现组件居中对齐的方法。

?float属性

浮动的框可以向左或向右移动，直到它的外边缘

碰到包含框或另一个浮动框的边框为止。

Float属性的合法值

值描述

left元素向左浮动。

right元素向右浮动。

默认值。元素不浮动，并会显示其在文本中

none

出现的位置。

inherit规定应该从父元素继承float属性的值。

?clear属性。清除浮动。

clear属性的合法值

合法值说明

left在左侧不允许有浮动元素。

right在右侧不允许有浮动元素。

both在左右两侧均不允许有浮动元素。

none默认值。允许浮动元素出现在左右两侧。

inherit继承父元素clear属性的值

?利用margin属性实现水平居中对齐

如果要实现块元素的水平居中对齐，可以通过让

margin左右边距为auto的方式来实现，这样块元素将

平均分配左右边距，从而实现水平居中对齐。

案例

总结

本案例主要演示了float属性和clear

属性的使用方法，以及利用margin属性

实现块元素水平居中对齐的方法。