浮动 float 记住设置浮动 后 一定要清除
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>CSS中的浮动</title>
<link rel="shortcut icon" type="image/x-icon" href="../Public/images/2.1.png">
<!-- 外部样式 -->
<link rel="stylesheet" type="text/css" href="../Public/css/2.1.css">
<!-- 内部样式 -->
<style type="text/css">
/* float: left; 左浮动 浮动属性会脱离文档普通流 一定要清除浮动 */
ul li{
list-style: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: #ccc;
margin: 0 1px;
float: left;
}
.box1{width: 200px;height: 200px;background:red; float: right;}
/* .clear{clear: both;} left清除左边浮动 right清除右边浮动 both清除两边浮动 */
.clear{clear: both;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>php</li>
</ul>
<div class="clear"></div>
<div class="box1">div1</div>
<div class="box1">div2</div>
<div class="box1">div3</div>
</body>
</html>