微信小程序WXSS的学习（二）——Float布局

个人学习总结，防遗忘

float可以解决一些“绕图排文”的问题

float:设置浮动区域的位置（left/right/none） margin:设置外边距，最多设置四个值：上右下左/上【左右】下/【上下】【左右】 clear;： 为了在float之后为了不影响下面内容的布局，一定要记得清浮动

float局部详解

演示：

代码

wxml：

<view class="box"> <view class="title">float布局</view> <view class="bg1"> <view class="box1">box1</view> <view class="box2">box2</view> <view class="box3">box3</view> <view class="box4">box4</view> </view> <view class="bg2"> <view class="header">header</view> <view class="lefter">lefter</view> <view class="main">main</view> <view class="righter">righter</view> <view class="footer">footer</view> </view> </view>

wxss：

.bg1{ height: 240px; width: 200px; margin:10px auto; } .box1{ width: 100px; height: 80px; background-color: red; margin: 0 auto; } .box2{ width: 100px; height: 80px; background-color: yellow; float: left; } .box3{ width:100px; height: 80px; background-color: blue; float:right; } .box4{ width: 100px; height: 80px; background-color: yellowgreen; margin: 0 auto; clear: both; } .bg2{ height: 240px; text-align: center; margin:10px auto; } .header{ line-height: 100rpx; background-color: red; } .lefter{ width: 20%; line-height: 200rpx; background-color: yellowgreen; float: left; } .main{ width: 60%; line-height: 200rpx; background-color: rgb(25, 203, 55); float: left; } .righter{ width: 20%; line-height: 200rpx; background-color: yellow; float: right; } .footer{ line-height: 100rpx; background-color: blue; clear: both; }