[置顶] html5和css篇有关浮动以及如何清除浮动
今天温习了一下写网页的骨架和血肉，html5和css，因为要备战找实习，之前看了一下各大公司笔试题，觉得虽然可以敲出来但是还是不够熟悉，而且考试内容好基础，好全面，所以每天还是记录一下。
其实大一上学期就开始接触网页的制作，但是到如今才对它有个深刻清晰的了解，所谓厚积薄发，大概可以领略一点点。
言归正传，今天主要想说一下，div层浮动的问题。
回忆一下，html的块元素主要有哪些：div ul ol p hr h1-h6 ,这是今天用到的，这些块元素都会独占一行，块元素会按照先后顺序从新的一行开始往下排，那么怎样才能让div层能在同一行呢？
拿今天的我练习的例子讲：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>湘潭大学艺术学院</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body>
<div id="footer"> <div class="foot"> <div class="first"> <a>链接 Links</a> <div> <ul> <li>湘潭大学艺术学院OLO教学平台</li> <li>湘潭大学教务管理系统</li> <li>中国大学生在线</li> </ul> </div> <div> <ul> <li>湘潭大学</li> <li>湘潭大学图书馆</li> <li>湖南省设计家协会</li> </ul> </div> <div> <ul> <li>湘潭大学学生工作处</li> <li>国家教育部</li> <li>中国视觉联盟</li> </ul> </div> </div> <div class="second"> <hr> <a>联系 Contact</a> <ul> <li>[email protected]</li> <li>电话 +86 0730-65866245</li> <li>传真 +86 0731-58293856</li> <li>中国湖南省湘潭市雨湖区湘</li> <li>潭大学艺术学院</li> </ul> </div> </div> </div>
</body> </html>
css如下：
#footer{ background-color: darkorange; overflow: hidden; clear: both; } .foot{ width: 1200px; margin: 0 auto; } .foot ul{ margin-left: 130px; list-style-type:none; float: left; } .second{ clear: both; } .second a{ margin-left: -350px; }
总结一下清除浮动的方法：
1、给其父级也加浮动，但当父级css：margin 0 auto时，父级div就不会居中了；
2、给父级加display:inline-block,同样父级css为margin:0 atuo时，也不会居中，但是IE6和IE7会居中；
3、在浮动元素下加<div class="clear"></div>,其中clear的css样式为：.clear{ height:0px;font-size:0;clear:both;}
4、在浮动元素下加<br clear="all"/>
5、给浮动元素的父级加.clear{zoom:1;} .clear:after{content:""; display:block;clear:both;}
6、给浮动元素的父级加overflow:auto
总结到第六条我发现我之前的代码就不用写那么麻烦，直接在.foot里写overflow:auto，就搞定了！
附上基本完工的静态网页，明后两天更新动态的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>湘潭大学艺术学院</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="header">
<div>
<div class="img1"><img src="img/logo.png"></div>
<div class="daohang">
<span>关于我们</span>
<span>专业设置</span>
<span>教学科研</span>
<span>作品展示</span>
<span>展览讲座</span>
<span>招生就业</span>
</div>
<div class="find">
<form>
<input type="text" name="research" style="width: 160px;height: 20px"/>
<input type="submit" value=""
style="background:url('img/find.png') no-repeat; width:27px; height:27px;">
</form>
</div>
</div>
</div>
<img class="img2" src="img/img.png">
<div id="container">
<hr>
<div class="left">
<div class="exhi">
<h4>展览及讲座 EXHI&LECT</h4>
<div>
<img src="img/img2.png">
</div>
<h3>动画系第一次讲座--《动画文化随想》</h3>
<h5>2015-12-22</h5>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<ul>
<li>2015年12月17日 考研规划与指导讲座</li>
<li>2015年12月17日 不弃不离的艺术之路--周小愚教授艺术讲座</li>
<li>2015年11月22日 2015环太平洋艺术交流系列活动在湘潭大学举行</li>
<li>2015年10月24日 曾强教授的励志讲座</li>
<li>2015年10月17日 专业教育与考研启迪专题讲座</li>
</ul>
</div>
<div class="dynamic">
<h4>学院动态 DYNAMIC</h4>
</div>
</div>
<div class="right_mid">
<div class="mid">
<h4>招生就业</h4>
<h4>ENROLLMENT&EMPLOYMENT</h4>
<p>
德邦物流股份有限公司本科生招聘<br>
2015年10月05日<br>
德邦物流股份有限公司本科生招聘简章<br>
宣讲时间：2012年4月16
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
中铁城建集团有限公司招聘信息<br>
2015年10月05日<br>
招聘摄影摄像艺术专业学生1名，专业动手能力强，形象好，作品获奖或有一定经验
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
艺术学院研究生导师队伍——宋扬<br>
2015年10月03日<br>
艺术学院研究生导师队伍——宋扬 副教授，湖南湘潭人，湘潭大
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
2015年09月28日 艺术学院2016年推<br>
2015年09月28日 艺术学院2016年推<br>
2015年07月24日 艺术学院研究生研究生
</p>
</div>
<div class="right">
<h4>通知公告</h4>
<h4>ANNOUNCEMENT</h4>
<p>
第八届中国大学生DV文化艺术节作<br>
2016年03月10日<br>
由湘潭大学主办，中国政法大学以及北京服装学院协办的第八届中国大学生
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
2015年艺术学院教师系列副高级<br>
2015年10月05日<br>
经学院职称评审推荐小组集体讨论，一致同意以下排序结果,同意予以公示三天。
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
艺术学院2016年推免攻读硕士学<br>
2015年10月05日<br>
复试时间：2015年10月9日上午8:00点； 复试地点：艺术学院会议室
</p>
<hr style="height:1px;border:none;border-top:1px dashed grey;">
<p>
2015年10月05日 艺术学院2015届毕业<br>
2015年10月05日 关于湘大艺术学院<br>
2015年10月05日 关于举办湘潭大学首届
</p>
</div>
<div class="display">
<h4>作品展示 DISPLAY</h4>
<hr>
</div>
</div>
</div>
<div id="footer">
<div class="foot">
<div class="first">
<a>链接 Links</a>
<div>
<ul>
<li>湘潭大学艺术学院OLO教学平台</li>
<li>湘潭大学教务管理系统</li>
<li>中国大学生在线</li>
</ul>
</div>
<div>
<ul>
<li>湘潭大学</li>
<li>湘潭大学图书馆</li>
<li>湖南省设计家协会</li>
</ul>
</div>
<div>
<ul>
<li>湘潭大学学生工作处</li>
<li>国家教育部</li>
<li>中国视觉联盟</li>
</ul>
</div>
</div>
<div class="second">
<hr>
<a>联系 Contact</a>
<ul>
<li>[email protected]</li>
<li>电话 +86 0730-65866245</li>
<li>传真 +86 0731-58293856</li>
<li>中国湖南省湘潭市雨湖区湘</li>
<li>潭大学艺术学院</li>
</ul>
</div>
</div>
</div>
</body>
</html>
和css代码：
#header{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.img1{
margin-right:40px;
margin-top: 30px;
margin-left: 5px;
float: left;
}
.img2{
margin-left: 300px;
}
.daohang{
margin-right: 40px;
margin-top: 74px;
float: left;
}
.daohang span{
margin-right: 50px;
font-family: 微软雅黑;
}
.find{
float: left;
margin-top: 30px;
margin-left: -200px;
}
#container{
width: 1200px;
margin: 0 auto;
height: 800px;
}
.left{
width:600px;
height: 100%;
float: left;
}
.exhi{
height: 70%;
float: left;
width: 560px;
}
.dynamic{
height: 30%;
float: left;
}
.exhi ul{
list-style-type: none;
margin-left: -40px;
}
.right_mid{
width: 600px;
height:100%;
float: right;
}
.mid{
width: 48%;
height: 70%;
float: left;
margin-right: 24px;
}
.right{
float: right;
width: 48%;
height: 70%;
}
.display{
float: left;
width: 600px;
/*margin-top: 20px;*/
/*height: 250px;*/
height: 30%;
}
#footer{
background-color: darkorange;
}
.foot{
width: 1200px;
margin: 0 auto;
overflow: auto;
}
.foot ul{
margin-left: 130px;
list-style-type:none;
float: left;
}
.second{
clear: both;
}
.second a{
margin-left: -350px;
}