摘要：课堂笔记：先制作一个导航条。可以用<div> <p> <ul>等对导航条进行属性设置设置浮动：float。可以用left right来设置左右浮动。浮动属性是不占据页面空间的浮动清除：clear both（常用）案例：链接：file:///C:/Users/Administrator/Desktop/gracie.html <!DO
课堂笔记：
先制作一个导航条。可以用<div> <p> <ul>等
对导航条进行属性设置
设置浮动：float。可以用left right来设置左右浮动。浮动属性是不占据页面空间的
浮动清除：clear both（常用）
案例：
链接：file:///C:/Users/Administrator/Desktop/gracie.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习css中的浮动</title>
<link rel="shortcut icon" type="image/x-icon" href="image/1.jpg">
<style type="text/css">
ul li{list-style: none;width: 100px;height: 45px;line-height: 50px;text-align: center;background-color: pink;margin: 0.5px 1px;float: left;border: 1px solid #ccc}
div{width: 100px;height: 50px;background-color: yellow;margin: 5px 5px;color: grey;text-align: center;}
.clear{clear: both;margin:5px 5px;}
.main{width: 100px;height: 50px;background-color: yellow;}
</style>
</head>
<body>
<ul>
<li>羽绒服</li>
<li>毛呢大衣</li>
<li>连衣裙</li>
<li>半身裙</li>
<li>裤子</li>
</ul>
<div class="clear"></div>
<div class="main">中长款羽绒服</div>
<div class="main">短款羽绒服</div>
<div class="main">大毛领羽绒服</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-19 16:50:32
老师总结：浮动只有水平方向 ,而且浮动元素仅针对块级元素, 也正是因为这些特点,浮动可以用来布局
