摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
ul li{
width: 90px;
height: 30px;
background-color: beige;
list-style: none;
padding-left: 30px;
padding-right: 30px;
line-height: 30px;
text-align: center;
float: left;
margin-left: 1%;
}
.li2{
clear:both;
margin-top:1%;
}
.li3{
float: left;
margin-top: -30px;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jquery</li>
<li>php</li>
</ul>
<br>
<div>
<ul>
<li class="li1">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
</ul>
</div>
</body>
</html>
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
语法：
float：left/right；
清除浮动
clear 属性规定元素的哪一侧不允许其他浮动元素。
语法：
clear:both;
批改老师：天蓬老师批改时间：2019-01-24 10:41:12
老师总结：浮动只能沿着水平方向进行, 一个元素一旦浮动, 不管之前是什么类型, 统统表现现块元素的特征, 这是重点
