1、案例说明：

• 演示float属性和clear属性的使用方法，以及利用margin属性实现块元素水平居中对齐的方法

2、案例演示

2.1、代码

wxml

<view class="box">
    <view class="title">Float页面布局</view>
    <view class="f1">
        <view class="box1">box1</view>
        <view class="box2">box2</view>
        <view class="box3">box3</view>
        <view class="box4">box4</view>
    </view>
    <view class="f2">
        <view class="header">header</view>
        <view class="leftBar">leftBar</view>
        <view class="main">main</view>
        <view class="rightBar">rightbar</view>
        <view class="footer">footer</view>
    </view>
</view>

wxss

.f1{
    height: 240px;
    width: 200px;
    margin: 10px auto;/*上下外边距10px，左右实现居中对齐（左右边距平均分配）*/
}
.box1{
    height: 80px;
    width: 100px;
    margin: 0px auto;
    background-color: red;
}
.box2{
    height: 80px;
    width: 100px;
    float: left;
    background-color: yellow;
}
.box3{
    height: 80px;
    width: 100px;
    float: left;
    background-color: rgb(229, 255, 0);
}
.box4{
    height: 80px;
    width: 100px;
    clear: left;
    margin: 0px auto;
    background-color: green;
}
.f2{
    height: 300px;
    width: 300px;
    margin: 10px auto;
    text-align: center;
}
.header{
    line-height: 75px;
    width: auto;
    background-color: red;
}
.leftBar{
    line-height: 100px;
    width: 50px;
    background-color: yellow;
    float: left;
}
.main{
    line-height: 100px;
    width: 200px;
    background-color: rgb(0, 255, 128);
    float: left;
}
.rightBar{
    line-height: 100px;
    width: 50px;
    background-color: yellow;
    float: left;
}
.footer{
    line-height: 75px;
    background-color: red;
    clear: left;
}

2.2、结果展示

结果.jpg

3、总结

知识点.jpg
float属性的合法值.jpg
clear属性的合法值.jpg
利用margin属性实现水平居中对齐.jpg

• 关于wxml中元素层级的认识：
  类似view和image之类的都是“组件”，组件当中会有“属性”，每个属性需要设定“合法值”，注意属性设定合法值一般是通过“:”,也有特殊的属性像class和style，设定合法值用“=”
• 是否在同一容器中使用一次float都要在下一个元素中加clear：
  建议添加