css浮动布局
<!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>css浮动</title>
<style>
.nav{height: 80px; background: pink;}
.nav li{float: left; padding:15px; text-decoration: none; list-style: none; height: 80px;}
.clear{clear: both;}
.box{float: left; height:50px; width:80px; background: cyan; margin:15px; line-height:50px;}
</style>
</head>
<body>
<ul class="nav">
<li>css</li>
<li>样式</li>
<li>中的浮动</li>
<li>回头来</li>
<li>继续</li>
<li>写作业</li>
</ul>
<div class="clear"></div>
<div class="box">不写作业</div>
<div class="box">不让继续</div>
<div class="box">学习课程</div>
<div class="box">哈哈哈哈</div>
</body>
</html>