摘要：3.7Css中浮动：左浮动｛float：left;｝清除浮动｛clear:both;｝使用了浮动之后脱离文档属性流不占文档空间，切记做完浮动要清除浮动！！！<html> <head> <meta charset="UTF-8"/> <title></title> <style t
3.7Css中浮动：
左浮动｛float：left;｝清除浮动｛clear:both;｝使用了浮动之后脱离文档属性流不占文档空间，切记做完浮动要清除浮动！！！
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
ul{height: 55px; background-color: #000000;margin: 0px;padding: 0px;}
.daohang{list-style: none;width: 100px; height: 50px;color: #ccc;text-align: center;line-height: 50px;margin: 0px 10px;float: left;}
.daohang_a{list-style: none;width: 100px; height: 50px;color: #ccc;text-align: center;line-height: 50px;margin: 0px 10px;float: left;text-decoration: none;border: 0px solid #ccc;}
.daohang_a:hover {border-bottom: 5px solid #002DFF;color: red;}
</style>
</head>
<body style="background-color: white;" >
<div id="main">
<ul>
<img style="float: left;width: 150px; height: 50px;position: relative;left: 0px; " src=" http://www.php.cn/static/images/logo.png"/>
<li class="daohang" ><a href="#" class="daohang_a">首页</a></li>
<li class="daohang" ><a href="#" class="daohang_a">视频教程</a></li>
<li class="daohang" ><a href="#" class="daohang_a">社区问答</a></li>
<li class="daohang" ><a href="#" class="daohang_a">编程词典</a></li>
<li class="daohang" ><a href="#" class="daohang_a">手册下载</a></li>
<li class="daohang" ><a href="#" class="daohang_a">工具下载</a></li>
<li class="daohang" ><a href="#" class="daohang_a">类库下载</a></li>
<li class="daohang" ><a href="#" class="daohang_a">特色课程</a></li>
<li class="daohang" ><a href="#" class="daohang_a">菜鸟学堂</a></li>
</ul>
</div>
<div style="clear: both;margin:100px auto ;" >
<img style="margin-left: 210px;" src="http://img.php.cn/upload/article/000/000/003/5c20909c72220984.png"/>
</div>
</body>
</html>如果那里总结的不全或者有其他问题请指出!谢谢！
批改老师：天蓬老师批改时间：2018-12-25 13:08:23
老师总结：浮动是否要消除,要看它是否对后面的元素有影响,如果没影响就不用的
