abstract：float:left ,right; 一但浮动起来,就是脱离文档流.与本页面无关系,简单说就像是飘起来一样!形成另一层次,本页面部分就会被护盖,当本页面浮动起来时需要左右移动.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
float:left ,right; 一但浮动起来,就是脱离文档流.
与本页面无关系,简单说就像是飘起来一样!
形成另一层次,本页面部分就会被护盖,当本页面浮动起来时需要左右移动.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中的浮动</title>
<style type="text/css">
ul li{
width: 100px;height:50px;background-color: lightskyblue;line-height: 50px;text-align: center;
margin: 0px 2px;list-style: none;
float: left;
}
.box1{
width: 100px;height: 100px;background-color: green;margin: 0px 2px;text-align: center;
float: right;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<ul>
<li>杨海诺</li>
<li>唐果</li>
<li>杨海言</li>
<li>杨天琦</li>
<li>唐文杰</li>
</ul> /*清除仅仅只是演示*/
<div class="clear">清除</div>
<div class="box1">唐果</div>
<div class="box1">杨海言</div>
<div class="box1">杨天琦</div>
<div class="box1">唐文杰</div>
</body>
</html>
Correcting teacher：查无此人Correction time：2019-05-21 09:18:20
Teacher's summary：完成的不错。浮动在移动端用到的比较多。继续加油。