摘要：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>float会脱离文档流，使用完毕及时用clear：both;清除 </title>&l
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>float会脱离文档流，使用完毕及时用clear：both;清除 </title>
<style>
ul li{
list-style:none;
width:100px;
height:30px;
line-height:30px;
text-align:center;
/* border:1px solid red; */
background:green;
margin: 0px 2px;
float:left;
}
.box{
width:200px;
height:200px;
background:yellow;
margin:2px 2px;
float:left;
}
.clear{
clear:both;
/* left/right/both */
}
/*浮动会脱离文档流，使用完毕及时用clear：both;清除 */
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<hr/>
<div class="clear"></div>
<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
</body>
</html>
批改老师：查无此人批改时间：2018-11-15 16:48:54
老师总结：你说的对，我就不需要说什么了，少年加油。
